CSS权重

CSS 选择器

CSS 选择器参考手册

选择器 例子 描述
通配符 * 选择所有元素
id #id 选择 id=”firstname” 的所有元素
class .container 选择 class=”container” 的所有元素
标签 span 选择所有 元素
后代选择器 div p 选择
元素内部的所有

元素
子元素选择器 div>p 选择父元素为
元素的所有

元素
兄弟选择器 div+p 选择紧接在
元素之后的所有

元素
属性选择器 [target] 选择带有 target 属性所有元素
伪类选择器 a:link 选择所有未被访问的链接
伪元素选择器 p:before 在每个

元素的内容之前插入内容

CSS 权重规则

  1. 第一优先级：如果使用了!important,那么它会覆盖全部的样式
  2. 第一等：内联样式，如: style=”color:red;”，权值为1000。
  3. 第二等：ID选择器，如：#wrapper，权值为0100。
  4. 第三等：类，伪类和属性选择器，如.content，权值为0010。
  5. 第四等：标签选择器和伪元素选择器，如div p，权值为0001。
  6. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  7. 继承的样式没有权值。

示例

1
#wrapper div#container h2 { /* 0100 + 0001 + 0100 + 0001 = 0202 */
2
    color: red;
3
}
4
#wrapper #container > h2 { /* 0100 + 0100 + 0001 = 0201 */
5
    color: blue
6
}
7
body #wrapper div[id="container"] h2 { /*  0001 + 0100 + 0001 + 0001 = 0103 */
8
    color: green;
9
}
10
#container div.paragraph h2 { /*  0100 + 0001 + 0010 + 0001 = 0112 */
11
    color: orange;
12
}
13
#container [class="paragraph"] h2 { /*  0100 + 0010 + 0001 = 0111 */
14
    color: yellow;
15
}
16
div#container div.paragraph h2.first { /*  0001 + 0100 + 0001 + 0010 + 0001 + 0010 = 0122 */
17
    color: pink;
18
}
1
<body>
2
<div id="wrapper">
3
    <div id="container">
4
        <h2>优先级是如何计算的？</h2>
5
        <p>优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。</p>
6
        <div class="paragraph">
7
            <h2 class="first">!important 例外规则</h2>
8
            <p>当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。</p>
9
        </div>
10
    </div>
11
</div>
12
</body>
CSS
选择器

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！