CSS选择器的权重与优先规则分享

下面是关于CSS选择器权重与优先级的完整攻略：

CSS选择器权重

当多个CSS规则同时作用于同一个元素时，浏览器需要决定应该按照哪个规则来应用样式。为了实现这个目的，CSS定义了选择器的权重，每个规则都按照特定的规则计算出一个特定的权重值。常见的选择器权重如下所示：

!important = Infinity
行内样式(style) = 1000
ID选择器(#id) = 100
类选择器(class),属性选择器,伪类(:hover, :focus, :active) = 10
元素选择器和伪元素(::before, ::after) = 1
通配符(*),相邻选择器(+,-),子选择器(>),后代选择器( ) = 0

CSS选择器优先级

当多个选择器的权重值相同时，CSS通过选择器的优先级来确定应该按照哪个规则来应用样式。当两个或多个选择器的权重值相同时，按照以下优先级顺序来决定应该应用哪个样式：

以!important声明的样式优先级最高；
根据权重值大小决定，权重值大的优先级高；
同一选择器中，靠近元素的样式声明优先级高；
同一规则中，后声明的样式优先级高；
通配选择器( * )和 :not()对优先级没有影响。

下面举例说明：

示例一

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 权重值为10 */
    p.red {
      color: red;
    }
    /* 权重值为1 */
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p class="red">Hello World</p>
</body>
</html>

上述示例中，选择器p.red和选择器p都能够作用于"Hello World"这个段落，但是p.red具有更高的选择器权重，因此这个段落将会被设置成红色。如果想要让权重相同的两个选择器中的样式生效，需要按照优先级顺序进行设置，例如，把p样式的位置调到p.red的前面：

  <style>
    /* 权重值为1 */
    p {
      color: blue;
    }
    /* 权重值为10 */
    p.red {
      color: red;
    }
  </style>

示例二

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 权重值为10 */
    p#myId {
      color: red;
    }
    /* 权重值为1 */
    #myId p {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="myId">Hello World</p>
</body>
</html>

上述示例中，选择器p#myId具有更高的选择器权重，因此这个段落将会被设置成红色。即使选择器#myId p写在前面，也不会改变颜色的显示。

总之，理解CSS选择器的权重和优先级是CSS中关键的基础之一，在编写样式时需要仔细考虑。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS选择器的权重与优先规则分享 - Python技术站

CSS选择器的权重与优先规则分享

CSS选择器权重

CSS选择器优先级

示例一

示例二

相关文章