常见布局修复方案—选择器特殊性问题-优快云博客

本文详细解析了CSS选择器特殊性概念及其计算方法，并通过具体案例展示了如何解决选择器覆盖问题，实现预期的样式应用。

最简单的一些 CSS 问题是由代码中的打字和语法错误造成的。例如，在声明末尾忘了加分号，或者在应该输入font-family时输入了font-face。通过CSS Validator 等服务运行代码可以突出显示所有语法错误，并且显示错误所在的行和对每个错误的简短描述。除了语法错误之外，比较常见的一个问题与特殊性和分类次序有关。在将一个规则应用于一个元素时，如果发现没有任何效果，这时往往存在特殊性问题。可以应用其他规则而且它们会工作正常，但是某些规则似乎不起作用。在这些情况下，问题往往是己经在文档的其他地方使用更特殊的选择器为这个元素定义了规则。

首先介绍一下选择器特殊性的概念：

为了计算规则的特殊性，给每神选择器都分配一个数字值，然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。可惜特殊性的计算不是以10为基数的，而是采用一个更高的未指定的基数。这能确保非常特殊的选择器（比如ID选择器不会被大量一般选择器（比如类型选择器）所超越，但是，为了简化，如果在一个特定选择器中的选择器数量少于10个，那么可以以10为基数计算特殊性。

选择器的特殊性分成4个成分等级：a、b、c、d

如果样式是行内样式，那么a=1
b等于ID选择器的总数。
c等于类、伪类和属性选择器的数量。
d等于类型选择器和伪元素选择器的数量。

使用这些规则可以计算任何CSS选择器的特殊性，下表给出了一些示例。

通过比较最后一列，我们很容易得出特殊性的优先级。

在下面的示例中，开发人员希望将内容区域中的段落背景设置为红色，但是希望下联second段落为蓝色。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.poem p {
background-color: red;
}
.second{
background-color: blue;
}
</style>
</head>
<body>
<div class="poem">
<p class="first">床前明月光</p>
<p class="second">疑是地上霜</p>
<p class="first">举头望明月</p>
<p class="second">低头思故乡</p>
</div>
</body>
</html>

(修改前)

但是在浏览器中显示second段落仍为红色。这是因为与选择second段落的选择器相比，选择内容区域中所有段落的选择器的特殊性更强，在浏览器的开发者工具中也很容易发现第二个样式被前面的覆盖了。为了实现想要的结果，需要让选择second 段落的选择器更特殊。在这种情况下，最好的方法是在second段落选择器的幵头添加内容元素的 class: