css 权重值(层叠性)实例详解

当一个 HTML 元素有多条 CSS 规则可用时，就需要计算 CSS 属性的优先级。CSS 属性的优先级（也称为权重值或层叠性）由选择器的特定性和源排序决定。

我们可以通过以下公式计算 CSS 属性的优先级：

内联样式（通过 style 属性定义的样式）——权重值为 1000。
ID 选择器——权重值为 100。
类选择器、属性选择器和伪类选择器——权重值为 10。
元素选择器和伪元素选择器——权重值为 1。
通用选择器（*）、子选择器（>）、相邻选择器（+）以及同层选择器（,）——权重值为 0。

在计算选择器特定性时，我们可以使用以下算法：

对于选择器中包含的 ID 属性值，在特定性值中增加 100。
对于选择器中包含的类属性值、属性选择器和伪类选择器，在特定性值中增加 10。
对于选择器中包含的元素标签名和伪元素选择器，在特定性值中增加 1。

例如，body h1 选择器中包含一个元素标签名和一个元素标签名，因此特定性值为 2。而 #content p 选择器中包含一个 ID 属性值和一个元素标签名，因此特定性值为 101。

用于定义样式的多个样式表中，后定义的样式表将覆盖先定义的样式表。同一样式表中，后定义的规则将覆盖先定义的规则。

以下是两个示例：

示例1

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>CSS 权重值实例1</title>
    <style>
        #content p {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>这是一个段落。</p>
    </div>
</body>
</html>

在这个示例中，#content p 权重值为 101（1 个 ID 属性值和 1 个元素标签名），而 p 权重值为 1（1 个元素标签名）。因此，#content p 的样式规则将覆盖 p 的样式规则，这意味着段落文字将显示为红色。

示例2

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <title>CSS 权重值实例2</title>
    <style>
        p:last-child {
            color: red;
        }

        p:first-child {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是第一个段落。</p>
        <p>这是第二个段落。</p>
        <p>这是第三个段落。</p>
    </div>
</body>
</html>

在这个示例中，p:last-child 和 p:first-child 都有相同的特定性值（1 个元素标签名），因此权重值相等。这时我们需要看到对应的 CSS 规则的源顺序。在这里，p:last-child 的样式规则在 p:first-child 的样式规则之后定义，因此 p:last-child 的样式规则将覆盖 p:first-child 的样式规则，这意味着最后一个段落文字将显示为红色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：css 权重值(层叠性)实例详解 - Python技术站

css 权重值(层叠性)实例详解

相关文章