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，那么第一条规则的特殊性就高。
没有评论:
发表评论