CSS Academy · 课时

优先级计算：内联样式、ID、类、元素

Q: 「优先级计算：内联样式、ID、类、元素」这节课中我会学到什么？

计算优先级分数，并预测任何样式冲突中哪条规则会生效。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

计算优先级分数，并预测任何样式冲突中哪条规则会生效。

优先级计算：内联样式、ID、类、元素 是 CoddyKit 上的免费 CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是特异性？

当多个规则针对同一元素和属性时，特异性决定哪个 CSS 规则获胜。它按 4 个部分计算得分：（A、B、C、D），其中 A 最高，D 最低。

特异性的组成部分

四个列：

A：内联样式（style="" 属性）= 1,0,0,0
B：ID 选择器（#id）= 0,1,0,0
C：类选择器（.class）、属性选择器、伪类 = 0,0,1,0
D：类型（元素）选择器、伪元素 = 0,0,0,1

特异性示例

计算特异性：

<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
  Header block — matches <code>#header</code>
  <span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
  <a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>

通用选择器不具有特异性

通用选择器 *、组合器（+、>、~、空格）以及 :where() 伪类对特异性的贡献都为零（0,0,0,0）。

内联样式优先

内联样式（style="" 属性）具有最高特异性（1,0,0,0）。只有 !important 才能在样式表规则中覆盖它们。

比较特异性得分

从左到右进行比较。得分不同的第一个列决定获胜者。（0,1,0,0）胜过（0,0,99,99），因为 ID 列会立即决定结果。

:is()、:not() 和 :has() 的特异性

:is()、:not() 和 :has() 会采用其最具体参数的特异性：

<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>

nth-child 的特异性

:nth-child()、:first-child、:hover 以及其他伪类都会增加（0,0,1,0），即类级别的特异性。

伪元素的特异性

::before、::after、::first-line 等都会增加（0,0,0,1），即元素级别的特异性。它们位于 D 列。

特异性不是继承

特异性按元素的每个属性分别计算。对于给定属性，特异性更高的规则会获胜；但来自高特异性父元素的继承值，不会胜过子元素上特异性更高的直接规则。

特异性计算工具

使用 specificity.keegan.st 等在线工具或浏览器 DevTools 来验证特异性。在 DevTools 中，样式面板里被划掉的样式表示更具体的规则已经获胜。

快速检查

哪个选择器的特异性更高：#sidebar .link 还是 .nav .nav-item .nav-link.active？

回顾

特异性得分为（A、B、C、D）：内联样式、ID、类/属性/伪类、元素/伪元素。从左到右比较，第一个不同的列决定结果。:where() 始终贡献零。一个 ID 可以胜过任意数量的类选择器。使用 DevTools 的样式面板查看哪些规则获胜以及获胜原因。

常见问题解答

「优先级计算：内联样式、ID、类、元素」课时是免费的吗？

是的 — 「优先级计算：内联样式、ID、类、元素」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「优先级计算：内联样式、ID、类、元素」这节课中我会学到什么？

计算优先级分数，并预测任何样式冲突中哪条规则会生效。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「优先级计算：内联样式、ID、类、元素」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 CSS Academy