样式优先级干货：掌握 CSS 选择器优先级，主导元素风格
2022-12-17 11:10:00
掌握 CSS 选择器优先级：主宰样式，掌控网页设计
简介
对于无数 CSS 爱好者和网页设计师来说，为网站精心打造迷人外观是他们的不懈追求。然而，如果这些努力付出却导致风格混乱，岂不是令人沮丧？今天，我们将揭开 CSS 选择器优先级的神秘面纱，帮你化解烦扰，成为 CSS 领域的操控者！
CSS 选择器优先级：主导样式的指挥棒
想象一下，我们站在 CSS 选择器的战场上，每个选择器都是一位骁勇善战的士兵，而它们必须遵循严格的优先级规则。这些规则决定了哪位士兵的命令更胜一筹，并最终决定元素的展示样式。
选择器类型：不同的士兵，不同的能力
元素类型选择器：最基本的战士
这些选择器瞄准的是 HTML 元素的原始身份，例如 <p> 标签或 <div> 标签。它们如同 CSS 领域的步兵，默默无闻，却不可或缺。
p {
color: black;
}
类选择器：灵活多变的利器
类选择器允许我们针对具有特定类名的元素进行造型，让网页更加灵活。它们就像特种部队，可以深入敌后，精准打击。
.button {
border: 1px solid #000;
}
ID 选择器：独一无二的王者
ID 选择器针对的是具有唯一 ID 的元素，是 CSS 领域的重磅炸弹。一旦出击，它们能摧枯拉朽，让元素瞬间脱颖而出。
#header {
background-color: #f00;
}
通用选择器：一网打尽的绝招
通用选择器是 CSS 的万金油，它能同时选中所有元素，是真正意义上的百搭好手。但请谨慎使用，以免造成样式混乱。
* {
font-family: Arial, Helvetica, sans-serif;
}
后代选择器：层层递进的战术
后代选择器就像 CSS 领域的渗透部队，可以穿越层层元素，直击目标。它们是实现复杂布局和层叠样式的利器。
div p {
font-size: 1.2em;
}
兄弟相邻选择器：精准定位的妙招
兄弟相邻选择器能够选中与目标元素相邻的元素，让布局更加精细。它们就像 CSS 领域的狙击手，精准无误，一击即中。
h1 + p {
margin-top: 1em;
}
决定优先级的秘密武器：特权和权重
现在，我们来揭秘决定优先级的秘密武器：特权和权重。
特权：最高级别的优先通行权
特权如同 CSS 领域的皇室成员，拥有至高无上的优先权。它们可以无视其他选择器的规则，直接指定元素的样式。
!important {
color: red;
}
权重：计算优先级的数学法则
权重是一种数值，它决定了选择器的优先级高低。权重越高，优先级越高。当两个或多个选择器针对同一元素时，权重高的选择器将胜出。
| 选择器类型 | 权重 |
|---|---|
| 特权 | 1000 |
| ID 选择器 | 100 |
| 类选择器 | 10 |
| 元素类型选择器 | 1 |
| 通用选择器 | 0 |
特权与权重的组合：所向披靡
特权和权重携手合作，共同决定了选择器优先级的最终走向。特权拥有最高优先级，可以覆盖任何权重。当没有特权时，权重将发挥作用，高权重选择器将主导元素的样式。
灵活运用，玩转 CSS 选择器优先级
掌握了选择器优先级，你就能巧妙地运用各种选择器，构建出风格统一、层次分明的网页。
案例 1：让导航栏始终置顶
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
}
这个 CSS 规则使用 position: fixed; 将导航栏固定在顶部，无论页面如何滚动，导航栏始终保持原位。这是因为 position 属性具有特权，它可以覆盖其他选择器的规则。
案例 2：为特定类名的按钮添加边框
.button-primary {
border: 1px solid #000;
}
这个 CSS 规则使用类选择器 button-primary，为具有此类名的所有按钮添加黑色边框。如果我们希望让某个特定按钮具有不同的边框样式，我们可以使用 ID 选择器来覆盖类选择器的样式。
#button-special {
border: 2px dashed #f00;
}
由于 ID 选择器具有更高的优先级，因此 #button-special 的边框样式将覆盖 .button-primary 的样式。
案例 3：让所有段落首字母突出显示
p:first-letter {
font-size: 1.5em;
font-weight: bold;
}
这个 CSS 规则使用伪类选择器 :first-letter，让每个段落的首字母变大并加粗。然而，如果我们希望让某些段落的首字母具有不同的样式，我们可以使用后代选择器来覆盖伪类选择器的样式。
div.content p:first-letter {
color: #f00;
}
由于后代选择器具有更高的优先级，因此 div.content p:first-letter 的样式将覆盖 p:first-letter 的样式，让 div.content 中的段落首字母变成红色。
掌握优先级，征服 CSS 的世界
现在，你已经掌握了 CSS 选择器优先级的精髓。灵活运用这些知识，你就能驾驭 CSS 的力量，轻松构建出赏心悦目的网页，让你的网站脱颖而出！
常见问题解答
- 如何设置 CSS 优先级？
通过特权（!important）或权重（选择器类型和嵌套深度）来设置。
- ID 选择器和类选择器哪个优先级更高？
ID 选择器优先级更高，权重为 100，而类选择器权重为 10。
- 后代选择器如何影响优先级？
后代选择器每嵌套一层，权重就会增加 1。
- 如何解决 CSS 优先级冲突？
使用特权、权重或更具体的优先级规则来覆盖冲突的样式。
- 如何调试 CSS 优先级问题？
使用浏览器开发工具（如 Chrome DevTools）检查元素样式，并查看影响优先级的选择器和规则。
