详细解读 CSS 优先级，终于忘不掉了

时间 2019-11-21

标签详细解读 css 优先级终于忘不掉了栏目 CSS 繁體版

原文原文链接

CSS 优先级注意事项

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

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

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

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

选择器类型优化

对优先级没有影响的（能够理解为优先级很是低的）ui

通配选择符 (*)
关系选择符
- + 相邻兄弟选择器
- > 子选择器
- ~ 通用兄弟选择器
- ' ' 后代选择器
:not() 否认伪类

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

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

其余影响最终结果的插件

一、内联样式 style="xxx" <a style="color:red;"></a>调试

二、!importantcode

一些要注意的状况

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

<head>
    <style> .box1::after { content: "我是伪元素"; color: cyan; } #box { color: red; } </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      hello div
    </div>
  </body>
复制代码

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

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

<head>
    <style> .box1:hover { color: cyan; } [name="lxfriday"] { color: red; } .box1 { color: pink; } </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      hello div
    </div>
  </body>
复制代码

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

`!important`

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

不要在内联样式中使用 !important，当心被喷。内联样式已经具备极高的优先级了，若是选择器中添加了 !important，能够考虑再定义一个更精确的选择器来覆盖 !important。

若是内联样式真的添加了 !important，则能够用 js 来消除（js 没法消除 class、ID 选择器的 !important）。

<body>
    <div id="box" class="box1" style="color: red !important">
      hello div
    </div>
    <script> document.querySelector("#box").style.color = "blue"; </script>
  </body>
复制代码

下面是一些优化的经验：

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

一些覆盖 !important 的办法：

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

table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
复制代码

或者使用相同的选择器，可是置于已有的样式以后;

td { height: 50px !important; }

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

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

CSS 优先级须要注意的几点

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

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

<head>
    <style> *#foo { color: green; } *[id="foo"] { color: purple; } </style>
  </head>
  <body>
    <div id="foo">
      hello div
    </div>
  </body>
复制代码

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

无视 DOM 树中的距离

<head>
    <style> body h1 { color: green; } html h1 { color: purple; } </style>
  </head>
  <body>
    <h1 id="foo">
      hello div
    </h1>
  </body>
复制代码

显示为purple。

关于伪类和伪元素

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

:link :visited :hover :active 对 <a> 标签推荐使用这个顺序
- link: 连接日常的状态
- visited: 连接被访问过以后
- hover: 鼠标放到连接上的时候
- active: 连接被按下的时候
:first-child :last-child :nth-child() :nth-last-child() :only-child
:not()
:focus

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

::before ::after
::first-line
::first-letter
::selection

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