详细解读 CSS 优先级，终于忘不掉了1、优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择

CSS 优先级注意事项

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

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

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

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

选择器类型

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

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

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

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

其他影响最终结果的

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

2、!important

一些要注意的情况

伪元素不可选中（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。

2、类选择器和属性选择器它们的优先级是一样的，改变下面代码中的属性选择器 [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，带给你十足的干货，欢迎加群讨论。