正在加载...

CSS 优先级

选择器你会写了。真实样式表里规则会撞车：两条规则瞄向同一元素、同一属性。浏览器不靠猜——看优先级（specificity）；权重一样时，看文件里的书写顺序。

优先级是什么意思？

优先级是浏览器给选择器的权重。冲突时，对那条属性更重的选择器胜出。日常记住这把梯子：行内 style > id > class（以及属性 / 伪类）> element（以及伪元素）。单独的 * 和组合符本身不加权重。

排名一览

先背这个顺序。细节更多，但多数初学者的困惑靠这把梯子就能解。

📊 CSS 优先级排名（日常）

类型 示例 通常胜过
行内 style style="color: red" 样式表里几乎一切
Id #hero、#nav class 与 element
Class / 属性 / 伪类 .card、[type="email"]、:hover element 选择器
Element / 伪元素 p、h1、::before 仅更弱或同权规则（然后看源码顺序）

class 胜过 element

标签选择器很宽。class 更精确——class 的颜色会赢。只有权重相等时顺序才重要。

class 胜过 element

css
CSS Code 
p {
color: #334155;
}

.note {
color: #0f766e;
}

怎么读这场冲突？

对 <p class="note"> 两条都匹配。.note 是 class；p 是 element。class 赢 → 青绿文字。

id 胜过 class

id 比 class 更重。可复用外观优先用 class；id 留给真正唯一的钩子。

id 胜过 class

css
CSS Code 
.note {
color: #0f766e;
}

#title {
color: #9f1239;
}

为什么重要？

若 <h1 id="title" class="note"> 变成酒红，是 id 赢了——不是因为「感觉更重要」，而是权重更高。

权重相等 → 后面的规则赢

当两条规则优先级相同时，对那条属性，CSS 里更靠后的那条赢。

同权 — 源码顺序说了算

css
CSS Code 
.card {
border-color: #cbd5e1;
}

.card {
border-color: #0f766e;
}

打平时的习惯

两个选择器都是一个 class。第二条 .card 赢 → 青绿边框。若你想要第一种颜色，检查是否还有更强的选择器也匹配了。

组合选择器实战

选择器会组合：nav a.button:hover 比单独的 a 更强，因为加了 class 和伪类。不必每行都算分——问：有 id 吗？多了 class 吗？还是只有标签？

组合选择器胜过裸 element

css
CSS Code 
a {
color: #334155;
}

nav a.button {
color: #0f766e;
}

关于 !important

!important 可以绕过普通优先级。它是灭火器，不是日常工具。滥用会让以后难改。先把结构和更清晰的选择器理顺。

好习惯

  • 外观用 class；id 留给唯一钩子
  • 卡住了？看每个选择器在梯子哪一格
  • 同权 → 看文件里更靠后的规则
  • 别为了「赢」堆很长的链——HTML 一变就断
  • !important 放最后，别放最先

自己动手

  1. 页面：<p class="note">你好</p>、<h1 id="title" class="note">标题</h1>，以及 <nav> 里的 <a class="button">走</a>。
  2. 写 element 对 class（p 灰、.note 青绿）——note 段落应为青绿。
  3. 加 #title { color: #9f1239; }——尽管有 .note，标题应变酒红。
  4. 写两条 .card 的 border-color——后一条应赢。
  5. 可选：在 nav 链接上比较 a { … } 与 nav a.button { … }。

常见错误

  • 以为「声明越多」优先级越高——不会
  • 以为最后一个文件总能压过 id——更高权重仍然赢
  • 把 #一切 或 !important 当默认补丁
  • 搞混梯子档位（把 class 当成 element）
  • 忘记同权会回到源码顺序

小结

  • 优先级决定同一属性上的冲突赢家
  • 日常梯子：inline > id > class/属性/伪类 > element/伪元素
  • 同权 → 后面的规则
  • 外观用 class；id 与 !important 少用
  • 先看档位，再看顺序
  • 用 p / .note / #title 练到赢家一目了然

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程