阅读 1517

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

CSS 优先级注意事项

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

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

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

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

选择器类型

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

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

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

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

其他影响最终结果的

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

2、!important

一些要注意的情况

  1. 伪元素不可选中(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>
复制代码

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; }
复制代码
  1. 或者使用相同的选择器,但是置于已有的样式之后;
td { height: 50px !important; }

td { height: 55px !important; } /* 应用这规则 */
复制代码
  1. 或干脆改写原来的规则,以避免使用 !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 的形式表示。常见伪类:

  1. :link :visited :hover :active<a> 标签推荐使用这个顺序
    • link: 链接平常的状态
    • visited: 链接被访问过之后
    • hover: 鼠标放到链接上的时候
    • active: 链接被按下的时候
  2. :first-child :last-child :nth-child() :nth-last-child() :only-child
  3. :not()
  4. :focus

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

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

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

公众号二维码

关注下面的标签,发现更多相似文章
评论