CSS3学习教程，从入门到精通，CSS3 选择器权重问题语法知识点及案例代码（5）

CSS3 选择器权重问题语法知识点及案例代码

一、选择器权重概述

在 CSS 中，当多个选择器同时匹配同一个元素时，浏览器会根据选择器的权重来决定哪个样式生效。权重高的选择器的样式会覆盖权重低的选择器的样式。

二、选择器权重计算规则

1. 内联样式（Inline Styles）

内联样式直接写在 HTML 元素的 style 属性中，权重为 1000。

2. ID 选择器（ID Selectors）

ID 选择器以 # 开头，权重为 100。

3. 类选择器、属性选择器和伪类选择器（Class, Attribute, and Pseudo-class Selectors）

类选择器以 . 开头，属性选择器用方括号 [] 包围，伪类选择器以 : 开头，它们的权重均为 10。

4. 元素选择器和伪元素选择器（Element and Pseudo-element Selectors）

元素选择器直接使用元素名称，伪元素选择器以 :: 开头，它们的权重均为 1。

5. 通配符选择器（Universal Selector）

通配符选择器用 * 表示，权重为 0。

6. 继承

某些 CSS 属性会从父元素继承到子元素，继承的样式权重为 0。

7. `!important` 声明

在样式声明后添加 !important，该声明的权重为 无穷大，会覆盖其他所有样式。

三、权重计算案例

案例 1：不同选择器类型权重比较

<!DOCTYPE html>
<html>
<head><title>CSS 选择器权重案例</title><style>/* 元素选择器，权重 1 */p {color: red;}/* 类选择器，权重 10 */.special {color: blue;}/* ID 选择器，权重 100 */#unique {color: green;}/* 内联样式，权重 1000 */</style>
</head>
<body><p id="unique" class="special" style="color: yellow;">这是一个段落文本。</p>
</body>
</html>

注释：

段落元素同时被元素选择器 p、类选择器 .special、ID 选择器 #unique 和内联样式 style 匹配。
根据权重规则，内联样式的权重最高（1000），所以文本颜色为黄色。

案例 2：选择器组合权重计算

<!DOCTYPE html>
<html>
<head><title>CSS 选择器权重案例</title><style>/* 元素选择器，权重 1 */div {background-color: lightgray;}/* 类选择器，权重 10 */.container {background-color: lightblue;}/* ID 选择器，权重 100 */#main {background-color: lightgreen;}/* 组合选择器，权重为各类选择器数量之和 */body #main div.container p {/* 1 (元素 p) + 10 (类 .container) + 100 (ID #main) + 1 (元素 div) + 1 (元素 body) = 114 */color: purple;}</style>
</head>
<body><div id="main" class="container"><p>这是一个段落文本，背景色由最高权重选择器决定。</p></div>
</body>
</html>

注释：

段落元素被多个选择器匹配，包括元素选择器 p、类选择器 .container、ID 选择器 #main 和组合选择器 body #main div.container p。
组合选择器的权重最高（114），所以文本颜色为紫色，背景色由组合选择器中的样式决定。

案例 3：`!important` 声明的使用

<!DOCTYPE html>
<html>
<head><title>CSS 选择器权重案例</title><style>/* 类选择器，权重 10 */.text {color: blue !important;}/* ID 选择器，权重 100 */#special {color: red;}</style>
</head>
<body><p id="special" class="text">这是一个特殊段落文本。</p>
</body>
</html>

注释：

段落元素同时被类选择器 .text 和 ID 选择器 #special 匹配。
类选择器中的 !important 声明使 color: blue 的权重高于 ID 选择器的 color: red，所以文本颜色为蓝色。

以下是在开发中常用的关于CSS3选择器权重的实际案例：

案例4：复杂页面布局中的样式覆盖

<!DOCTYPE html>
<html>
<head><title>复杂页面布局样式案例</title><style>/* 全局样式 - 权重较低 */p {color: #333; /* 权重1 */font-size: 14px;}/* 页面区域样式 - 权重中等 */.content p {color: #666; /* 权重11（1个类选择器+1个元素选择器） */font-size: 16px;}/* 特定模块样式 - 权重较高 */#mainContent .highlight {color: #FF6B6B; /* 权重110（1个ID选择器+1个类选择器） */font-weight: bold;font-size: 18px;}/* 特殊强调样式 - 权重最高 */#mainContent .highlight .emphasize {color: #2ECC71 !important; /* 权重无穷大 */font-style: italic;}</style>
</head>
<body><div id="mainContent" class="content"><p class="highlight">这是一段重点内容，应用了特定模块样式。</p><p class="highlight"><span class="emphasize">这是需要特别强调的内容</span>，应用了特殊强调样式。</p></div>
</body>
</html>

注释：

在这个案例中，p 元素受到多个选择器的影响。全局样式的权重最低，被后续更高权重的选择器覆盖。
.content p 的权重高于全局样式，因此在 .content 区域内的段落文本颜色和字体大小会按照此选择器的设置显示。
#mainContent .highlight 的权重更高，进一步覆盖了前面的样式，使具有 highlight 类的段落呈现特定的样式。
.emphasize 类通过 !important 声明确保其颜色样式具有最高优先级，即使嵌套在其他高权重选择器中也能生效。

案例5：响应式设计中的样式调整

<!DOCTYPE html>
<html>
<head><title>响应式设计样式案例</title><style>/* 默认样式 - 权重较低 */.card {width: 300px;padding: 20px;margin: 10px;background: #f9f9f9;}/* 大屏幕样式 - 权重中等 */@media (min-width: 768px) {.card {width: calc(50% - 20px); /* 权重10（类选择器） */display: inline-block;}}/* 特定区域的卡片样式 - 权重较高 */#gallery .card {background: #fff; /* 权重100+10=110（ID选择器+类选择器） */box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 特殊状态下的卡片样式 - 权重最高 */.card.highlight {border: 2px solid #FF6B6B; /* 权重10+10=20（类选择器+类选择器） */}</style>
</head>
<body><div id="gallery"><div class="card highlight"><h3>卡片标题 1</h3><p>卡片内容...</p></div><div class="card"><h3>卡片标题 2</h3><p>卡片内容...</p></div></div>
</body>
</html>

注释：

默认的 .card 样式在所有屏幕尺寸下都适用，但在大屏幕上会被媒体查询中的样式覆盖。
媒体查询中的 .card 样式权重与默认样式相同，但由于在特定媒体条件下应用，所以会覆盖默认样式。
#gallery .card 的权重更高，因此在 #gallery 区域内的卡片会呈现更复杂的样式。
.card.highlight 的权重更高，通过添加额外的类来实现特殊样式的覆盖。

案例6：框架与自定义样式冲突解决

<!DOCTYPE html>
<html>
<head><title>框架与自定义样式冲突案例</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>/* 自定义样式 - 权重较低 */.custom-btn {background: #FF6B6B; /* 权重10 */color: white;}/* 重要自定义样式 - 权重较高 */.important-btn {background: #2ECC71 !important; /* 权重无穷大 */color: white !important;}</style>
</head>
<body><button class="btn btn-primary custom-btn">默认按钮</button><button class="btn btn-primary important-btn">重要按钮</button>
</body>
</html>

注释：

Bootstrap 框架的 .btn 和 .btn-primary 类具有一定的权重，会影响按钮的样式。
自定义的 .custom-btn 类权重较低，可能无法完全覆盖 Bootstrap 的样式。
.important-btn 类使用了 !important 声明，确保其背景色和文字颜色能够覆盖 Bootstrap 的默认样式。

案例7：表单样式调整

<!DOCTYPE html>
<html>
<head><title>表单样式调整案例</title><style>/* 基础表单样式 - 权重较低 */input[type="text"] {padding: 8px;border: 1px solid #ddd; /* 权重1 */border-radius: 4px;}/* 特定表单区域样式 - 权重中等 */.form-group input[type="text"] {width: 200px; /* 权重11（类选择器+属性选择器） */}/* 错误状态样式 - 权重较高 */.form-group.has-error input[type="text"] {border-color: #FF6B6B; /* 权重110（类选择器+类选择器+属性选择器） */box-shadow: 0 0 3px rgba(255, 107, 107, 0.5);}/* 禁用状态样式 - 权重最高 */input[type="text"]:disabled {background: #f0f0f0 !important; /* 权重10+1000（伪类+!important） */opacity: 0.7;}</style>
</head>
<body><div class="form-group"><input type="text" placeholder="正常输入框"></div><div class="form-group has-error"><input type="text" placeholder="错误状态输入框"></div><input type="text" placeholder="禁用输入框" disabled>
</body>
</html>