CSS教程系列六——继承、层叠和特殊性

CSS中有一些概念是需要深刻理解的,此节开始将介绍CSS中的一些非常重要的概念。

1.继承。

继承是一个非常容易理解的概念,我们可以形象的把它比作遗传,父元素的特性会继承给它的子元素。

body {color:red;}

<body>

<p>一些文字</p>

</body>

上面的代码我们没有定义P的颜色,但它包围的文字的颜色为红色,因为它继承了父元素body的颜色。

2.层叠和特殊性。

body {color:red;}

p {color:green;}

<body>

段落一

<p>段落二</p>

</body>

我们把第一个例子稍稍修改一下,现在的结果是段落一为红色,段落二为绿色。

有些人或许会有疑问,根据刚才介绍的继承,段落二是不是应该继承红色呢?

实际中,在CSS里,某个元素的某个属性,我们可能在不同的地方定义了多次,这样它的样式就会发生“层叠”,这时候浏览器会不会不知所措呢?究竟应该应用哪种样式呢?

CSS中以不同规则的“特殊性”来决定应该应用何种样式,特殊性高的规则优先,若两个规则特殊性相同,则后定义的规则优先。

另外,对于我们正在浏览的同一网页,可能会有多个样式表对其产生作用,一般有原网页作者的样式表,浏览的用户的样式表以及浏览器或用户代理使用的默认样式表。将样式标记上!important会提高它的重要度,可以优先于任何规则。

层叠的重要度次序:

  • 标有!important的用户样式
  • 标有!important的作者样式
  • 作者样式
  • 用户样式
  • 浏览器/用户代理应用的样式
  • 最后根据选择器的特殊性决定规则的次序。

特殊性的一般规律:行内样式,即用Style属性编写的规则特殊性最高,其次,具有ID选择器的规则比没有ID选择器的规则特殊,再次具有类选择器的规则比只有类型选择器的规则特殊。最后,如果两个规则特殊性相同,那么后定义的规则优先。

注意:继承的样式的特殊性为空,即直接应用于元素的任何样式一定会覆盖继承的样式,这就是为什么第二个例子中P的颜色没有继承Body颜色的原因。

3.特殊性的计算

除了上述的一般规律外,我们也可以计算出某个规则的特殊性。

  • 行内样式是最高的,如果是行内样式则无需计算。
  • 计算ID选择器的数量 a
  • 计算类和伪类的数量 b
  • 计算类型选择器的数量 c

上面我们一共算了三个数,假设ID选择器的数量为a,类和伪类的数量为b,类型选择器的数量为c。最后得到它的特殊性为:abc (并非三个值相加,而是按顺序排列)

例如,有这样一条规则:#wrapper #content .post p {color:red;}

这条规则中共有两个ID,一个类和一个类型选择器,则计算出的三个值为:2,1,1。将它们按顺序排列起来得到的数值是211。如果还有一条规则也定义了P的样式,但计算出的值小于211,那么第一条规则的特殊性就高。

没有评论: