css选择器的特殊性
浏览数：28 /
时间：2015年06月09日
html元素的最终样式，由css的特殊性、继承性、层叠，这三种不同的机制共同决定，其中选择器的特殊性对初学者来说可能容易忽略它了，写css的时候经常会奇怪，怎么写在后面的css样式不生效，还被覆盖了呢？原来是特殊性这个东西在作怪。对于特殊性的表述，有几种不同的方式，但是，殊途同归，只要能理解特殊性就够了。
将特殊性看做一个初始值为0000的十位数。
1.对于选择器中出现的id属性值，按出现的次数在百位上加一。
2.对于选择器中出现的类属性、属性选择、伪类，按出现次数在十位上加一。
3.对于选择器中出现的元素和伪元素，按出现次数在个位上加一。
4.结合符及统配选择器不具有特殊性。
示例如下：
例1：
1 #abc h1{color:red;} //特殊性为：0101 2 #abc{color:blue;} //特殊性为：0100
例1所示，通过比较两个选择器的特殊性，最终应用于h1的前景色应为red;
例2：
1 #abc{color:red;} //特殊性为:0100 2 .abc{color:blue;} //特殊性为：0010
例2所示，若“#abc”和“.abc”作用于同一个元素，虽然从层叠上来看，".abc"后出现，但“#abc”的特殊性高于“.abc”，所以最终应用于元素的前景色为red;
其它的选择器可以此类推。
既然特殊性有4位数，那千位似乎没有用到，其实这是留给元素的行内样式的，一旦元素应用行内样式，那特殊性即为1000，行内样式从层叠性上来说也是最优先的。
参考书籍：
《css权威指南》
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
