5 CSS选择器世界深度剖析

选择器的权重和优先级

<uI class='shopping-list' id='shop'>
    <li><span>Milk</span></li>
    <l¡ class='favorite' id='must-buy'><span class='highlight'>Sausage</span> </li>
</ul>
<style>
  body(color:grey;)
  #shor.favorite:not(#shop) .highlight(color:red;)
  #shop .highlight:nth-of-type(1):nth-last- of-type(1)(color:blue;)
</style>

CSS三大特性

• 继承性
• 优先级
• 层叠性

优先级的等级

• 0级(0):通配选择器(*)、选择符(+、>、~、空格、|)、
• 1级(1): 元素、关系、伪元素
• 2级(10):类选择器、属性选择器、伪类
• 3级(100): ID选择器
• 4级(1000): style内 联选择器
• 5级(10000): !important

优先级的计算规则

权重顺序!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承>浏览器默认

选择器权重

• !important 优先级最高
• 元素属性优先级高
• 相同权重后写的生效