CSS教程:学习CSS的继承性

2019-03-14 21:26:25于丽

应用举例效果:因为选择符h1和.apple都匹配上面的H1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.apple这个样式,所以它显示的是红色。这是因为两条规则的特殊性不一样,CSS规则必须这样进行处理。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
统计选择符中的id属性个数。
统计选择符中的class属性个数。
统计选择符中的html标记名格式。
最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。
以下是一个按特性分类的选择符的列表:
h1 {color:blue;}特性值为:1
p em {color:purple;}特性值为:2
.apple {red;}  特性值为:10
p.bright {color:yellow;} 特性值为:11
p.bright em.dark {color:brown;}  特性值为:22
#id316 {color:yellow}  特性值为:100
从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。
五、CSS继承的优先级问题
上面我们讨论了CSS的继承性和特殊性,在特殊性的框架下,被继承的特性值为0,这就意味着任何显示声明的规则将会覆盖其继承样式。因此,不管一条规则具有多高的权重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承的规则而已,举例说明。
样式定义:
body { background:black;}
li { color:gray;}
ul.white { color:white}
应用举例代码:
<ul>
  <li>举例列表一</li>
  <li>举例列表二</li>
  <li>举例列表三</li>
  <li>举例列表四</li>
</ul>
有些读者可能认为除包含.white类的列表项显示为白色外,其余所有的列表项都应该是灰色的。然而情况并非如此。
为什么会出现这样的情况呢?因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大,所以每个列表项都是灰色的。
可能有些地方不是很好理解,大家多思考一下就会明白,平时在应用样式表的时候多留意思考一下。
下面我们再来看一个例子,若给定如下所示的标记,则EM强调文字将会是灰色的,而非黑色,因为EM规则的权值要大于从H1元素继承来的权值:
样式定义:
h1#id316 { color:black;}  特性值为:101
em { color:gray;} 特性值为:1
应用举例代码:
<h1 id="id316">深入探讨<em>CSS的继承性</em></h1>
这是因为第二条EM规则的特性值(1)要比被继承的特性值(0)要大,事实上规定h1#id316的原始特性值(101)对其继承值没有影响,仍旧为0。