详细解读 CSS 选择器优先级

CSS 优先级注意事项

1、优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

2、而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

3、当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

4、可以这样来看：选择器描述越具体越稀缺优先级越高，后面声明的比前面声明的选择器优先级高(同类型的选择器)。

选择器类型

对优先级没有影响的（可以理解为优先级非常低的）

1. 通配选择符 ( *)
2. 关系选择符

• + 相邻兄弟选择器
• > 子选择器
• ~ 通用兄弟选择器
• ' ' 后代选择器

:not() 否定伪类

对优先级有影响的（下面的排序优先级依次变大）

1. 元素选择器( h1 p div)
2. 伪元素 ( ::before ::after)
3. 类选择器 ( .class1) 和 属性选择器 ( a[title] img[title*=hello]) 两者优先级相同，声明在后面的会覆盖前面的
4. 伪类选择器 ( :hover)
5. ID 选择器 ( #demo)

其他影响最终结果的

1、内联样式

2、!important

一些要注意的情况

1. 伪元素不可选中（ID、class 都无法超越它）

  
    
  
  
    

      hello div
    
  

结果 我是伪元素 仍然不是红色，原因就是 #box 描述的是 div，而伪元素是无法用其他选择器选中的。这个伪元素的样式继承自 div。

我是伪元素

2、类选择器和属性选择器它们的优先级是一样的，改变下面代码中的属性选择器 [name="lxfriday"] 和类选择器 .box1 的位置，颜色会发生变化。

  
    
  
  
    

      hello div
    
  

综上，对最终效果的影响是：!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器 理解优先级应该从选择器对目标的描述准确程度，注意下面例子的效果：

!important

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

不要在内联样式中使用 !important，小心被喷。内联样式已经具有极高的优先级了，如果选择器中添加了 !important，可以考虑再定义一个更精确的选择器来覆盖 !important。

如果内联样式真的添加了 !important，则可以用 js 来消除（js 无法消除 class、ID 选择器的 !important）。

  
    

      hello div
    
    
  

js 消除内联样式 !important

下面是一些优化的经验：

1. 一定要优化考虑使用 样式规则的优先级来解决问题而不是 !important
2. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
3. 永远不要在你的插件中使用 !important，别人将很难更改样式
4. 永远不要在全站范围的 CSS 代码中使用 !important

一些覆盖 !important 的办法：

1. 只需再添加一条带 !important 的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）;

   table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

2. 或者使用相同的选择器，但是置于已有的样式之后;

td { height: 50px !important; }

td { height: 55px !important; } /* 应用这规则 */

3. 或干脆改写原来的规则，以避免使用 !important。

CSS 优先级需要注意的几点

基于形式的优先级（Form-based specificity）

优先级是基于选择器的形式进行计算的。在下面的例子中，尽管选择器 *[id="foo"] 选择了一个ID，但是它还是作为一个属性选择器来计算自身的优先级。

  
    
  
  
    

      hello div
    
  

显示为绿色。虽然匹配了相同的元素，但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。

无视 DOM 树中的距离

  
    
  
  
    

      hello div
    
  

显示为purple。

关于伪类和伪元素

伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。伪类使用 :xxx 的形式表示。常见伪类：

1. :link :visited :hover :active 对 标签推荐使用这个顺序

• link: 链接平常的状态
• visited: 链接被访问过之后
• hover: 鼠标放到链接上的时候
• active: 链接被按下的时候

:first-child :last-child :nth-child() :nth-last-child() :only-child

:not()

:focus

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素推荐写法为::xx, 常见伪元素

1. ::before ::after
2. ::first-line
3. ::first-letter
4. ::selection

欢迎关注我的公众号 云影sky，带给你十足的干货，欢迎加群讨论。

交流群