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