CSS 伪元素
CSS 清除浮动 

CSS 特异位

在 CSS 中，"特异性"（Specificity）是用来决定样式优先级的一个重要概念。它描述了当多个CSS规则应用于同一元素时，浏览器如何决定哪些规则具有更高的优先级，从而决定应用哪些样式。


特异性的计算规则

特异性通常以一个四位数表示：a, b, c, d，其中：

  • a 表示内联样式的特异性。

  • b 表示ID选择器的数量。

  • c 表示类选择器、属性选择器或伪类的数量。

  • d 表示元素选择器或伪元素的数量。


具体规则如下：

1、内联样式：具有最高的特异性，例如 <div style="color: red;"> 中的 style 属性。

特异性值为：1, 0, 0, 0


2、ID选择器：例如 #myElement。

特异性值为：0, 1, 0, 0


3、类选择器、属性选择器、伪类：例如 .myClass, [type="text"], :hover。

特异性值为：0, 0, 1, 0


4、元素选择器、伪元素：例如 div, ::before。

特异性值为：0, 0, 0, 1


特异性的比较是按照数值从左到右进行。例如，特异性值 0, 2, 3, 0 比 0, 1, 4, 0 更高，因为第二个数更大。如果有多个规则具有相同的特异性，则后面声明的规则会覆盖前面的规则。


特异性示例

如有下面的html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Specificity Example</title>
    <style>
        body {
            color: black;
        }
        h1 {
            color: blue;
        }
        .container h1 {
            color: red;
        }
        #heading{
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <h1 id="heading">Hello, world!</h1>
    </div>
</body>
</html>


在这个例子中：

1、body 元素的颜色为黑色，特异性为 0, 0, 0, 1.

2、h1 元素的颜色为蓝色，特异性为 0, 0, 0, 1.

3、.container h1 的颜色为红色，特异性为 0, 0, 1, 1.

4、#specialHeading 的颜色为绿色，特异性为 0, 1, 0, 0.


因此，#heading 的样式优先级最高，所以 <h1 id="heading">Hello, world!</h1> 的文本颜色将是绿色。