首先介绍一下选择器特殊性的概念：
为了计算规则的特殊性，给每神选择器都分配一个数字值，然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。可惜特殊性的计算不是以10为基数的，而是采用一个更高的未指定的基数。这能确保非常特殊的选择器（比如ID选择器不会被大量一般选择器（比如类型选择器）所超越，但是，为了简化，如果在一个特定选择器中的选择器数量少于10个，那么可以以10为基数计算特殊性。
选择器的特殊性分成4个成分等级：a、b、c、d
通过比较最后一列，我们很容易得出特殊性的优先级。 - 如果样式是行内样式，那么a=1
- b等于ID选择器的总数。
- c等于类、伪类和属性选择器的数量。
- d等于类型选择器和伪元素选择器的数量。
在下面的示例中，开发人员希望将内容区域中的段落背景设置为红色，但是希望下联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:
.poem .second{background-color: blue;}
（修改后） 