首页 > 代码库 > css选择器的特殊性
css选择器的特殊性
html元素的最终样式,由css的特殊性、继承性、层叠,这三种不同的机制共同决定,其中选择器的特殊性对初学者来说可能容易忽略它了,写css的时候经常会奇怪,怎么写在后面的css样式不生效,还被覆盖了呢?原来是特殊性这个东西在作怪。对于特殊性的表述,有几种不同的方式,但是,殊途同归,只要能理解特殊性就够了。
将特殊性看做一个初始值为0000的十位数。
1.对于选择器中出现的id属性值,按出现的次数在百位上加一。
2.对于选择器中出现的类属性、属性选择、伪类,按出现次数在十位上加一。
3.对于选择器中出现的元素和伪元素,按出现次数在个位上加一。
4.结合符及统配选择器不具有特殊性。
示例如下:
例1:
1 #abc h1{color:red;} //特殊性为:01012 #abc{color:blue;} //特殊性为:0100
例1所示,通过比较两个选择器的特殊性,最终应用于h1的前景色应为red;
例2:
1 #abc{color:red;} //特殊性为:01002 .abc{color:blue;} //特殊性为:0010
例2所示,若“#abc”和“.abc”作用于同一个元素,虽然从层叠上来看,".abc"后出现,但“#abc”的特殊性高于“.abc”,所以最终应用于元素的前景色为red;
其它的选择器可以此类推。
既然特殊性有4位数,那千位似乎没有用到,其实这是留给元素的行内样式的,一旦元素应用行内样式,那特殊性即为1000,行内样式从层叠性上来说也是最优先的。
参考书籍:
《css权威指南》
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。