css选择器的特殊性

 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权威指南》

 

   

  

转载于:https://www.cnblogs.com/xiaozweb/p/3812346.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值