(005)CSS选择器的具体性与层叠

一、引言

　　在上个小节中，各种选择符都分配有一个确定的具体性级别，用于度量它将会影响到的XHTML元素的可能数目。看看下面两条CSS规则，其中一条有一个元素选择符，而另一条有一个类选择符：

h2 {color: red}
.title {color: red}

　　再看看下面的XHTML代码片段，它有一个属于title类的h2元素。

<h2 class="title">Specificity and the Cascde.</h2>

　　第一条规则选择所有h2元素，第2条规则选择所有属于title类的元素。因为所示元素同时满足这2条标准，所以导致了两条CSS规则之间的冲突。图形化浏览器必须在两条规则中选择听从其中一条，以确定标题最终的颜色。在CSS中，比较具体的选择符会胜过较不具体的选择符。因为类选择符比元素选择符更具体，第2条规则有更高的具体性，所以标题将被呈现为蓝色。

 

二、CSS的具体性规律

　　现在的web浏览器按照一套复杂的方案来计算选择符的具体性。这里总结出如下规律来具体应对CSS的具体性。

• 全体选择符完全不具备具体性
• 元素选择符比全体选择符更具体
• 类或伪类选择符比元素选择符更具体
• ID选择符比类和伪类选择符更具体
• 内联的style属性中声明的CSS属性具有更高的具体性

　　组合选择符和后代选择符中的具体性可以被累加。每一种基本选择符类型都有一个与众不同的具体性方面的权重。一个具有两个类的选择符比具有一个类的选择符更具体，一个具有一个ID的选择符比一个具有两个类的选择符更具体，如此等等。计算具体性的算法保证了不可能发生一大批较不具体的选择符压过一个较具体的选择符这样的事情。无论多少元素选择符都不可能比一个类选择符更具体，无论多少类选择符都不可能比一个ID选择符更具体。即使能用上百个元素选择符拼凑出一个复杂的选择符来，另一条只有一个ID选择符的规则都将盖过它。

　　还有一种情况就是，如果两个选择符都以一个元素作为目标，并且它们具有相同的具体性，那会有什么结果。例如：

.info h2 {color:red}
h2.title {color: orange}

　　如果有一个h2元素属于title类，并且它还是另一个属于info类的后代，那么这2条规则都可以用于这个h2元素。浏览器是如何决定该服从哪条规则的呢？这时，层叠就可以说明这个情况了。

　　假定多个选择符具有相同的具体性，在此情况下，由于浏览器会按遇到样式声明的次序应用它们，所以后面的声明会盖过前面的声明。无论后一个声明出现在同一个规则中、出现在同一个样式表中另一个位置靠后的规则中，还是出现于在前一个声明所在的样式表的后面下载的另一个样式表中，结果都是一样。CSS的名字就来自它的这种特性：多个样式表彼此层叠（cascade），叠加出浏览器中最终的表现结果。下面是另外一个例子：

p    {color:black; color: green;}

　　这条规则包含两个样式声明，但是段落将会被呈现为绿色，因为绿色的前景色声明在层叠顺序中后出现。

 

转载于:https://www.cnblogs.com/jplatformx/p/4432586.html