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>
注释：
- 基础表单样式为所有文本输入框设置了通用样式，权重较低。
.form-group input[type="text"]的权重高于基础样式，调整了特定区域内的输入框宽度。.form-group.has-error input[type="text"]的权重更高，通过添加has-error类来表示输入框的错误状态。input[type="text"]:disabled使用了伪类和!important声明，确保禁用状态下的样式具有最高优先级。
四、权重计算总结
选择器权重的计算可以帮助开发者更好地理解样式应用的优先级。在实际开发中，合理利用选择器权重可以避免样式冲突，提高开发效率。
