CSS Academy · 课时

:not()、:is() 与 :where()

Q: 「:not()、:is() 与 :where()」这节课中我会学到什么？

使用 :not() 排除元素，使用 :is() 匹配列表中的任意元素，并使用 :where() 保持低优先级。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 :not() 排除元素，使用 :is() 匹配列表中的任意元素，并使用 :where() 保持低优先级。

:not()、:is() 与 :where() 是 CoddyKit 上的免费 CSS Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

:not() 伪类

:not(selector) 会选择不匹配给定选择器的元素。它会反转选择结果。

<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />

:not() 与多个参数

现代 CSS 允许在 :not() 中使用多个参数——它会匹配不符合所列任何选择器的元素：

<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>

:not() 的特异性

:not() 的特异性等于其最具体参数的特异性。:not(.active) 具有类级别的特异性（0,1,0）。

:is() 伪类

:is() 会匹配符合选择器列表中任意一个选择器的元素。它可以简化分组并减少重复。

<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>

:is() 的特异性

:is() 采用其最具体参数的特异性。如果列表中包含 ID 选择器，整个规则就具有 ID 特异性。

<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>

:is() 的宽容解析

:is() 使用宽容的选择器解析：如果列表中的某个选择器无效，该选择器会被静默忽略，其余选择器仍会应用。普通的逗号分隔选择器只要有一个无效，就会全部失效。

:where() 伪类

:where() 的工作方式与 :is() 完全相同，但具有零特异性。它专为工具类和重置样式而设计，这些样式应易于覆盖。

<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>

:where() 用于重置

:where() 非常适合 CSS 重置和基础样式，这些样式不应在特异性竞争中占优势：

<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>

比较特异性

特异性行为总结：

:is() —— 取参数中的最高特异性
:where() —— 始终为零特异性
:not() —— 取参数中的最高特异性

串联 :is() 和 :not()

将它们组合起来，可以创建精确且易读的选择器：

<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>

浏览器支持

所有现代浏览器都支持 :is() 和 :where()。现代浏览器支持带多个参数的 :not()。如果项目需要支持 IE11，请避免使用这些特性。

快速检查

无论参数是什么，哪个伪类都具有零特异性？

回顾

:not() 会反转选择结果，并接受多个参数。:is() 会匹配列表中的任意一个选择器，并采用该列表中的最高特异性。:where() 的行为相同，但特异性为零，非常适合重置样式。这三个伪类都使用宽容解析，会静默忽略无效选择器。

常见问题解答

「:not()、:is() 与 :where()」课时是免费的吗？

是的 — 「:not()、:is() 与 :where()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「:not()、:is() 与 :where()」这节课中我会学到什么？

使用 :not() 排除元素，使用 :is() 匹配列表中的任意元素，并使用 :where() 保持低优先级。你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「:not()、:is() 与 :where()」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 CSS Academy