编辑“︁CSS ` where()` 伪类”︁（章节）

== 实际应用示例 ==

=== 简化选择器列表 ===
`:where()` 可以用于简化多个选择器共享相同样式的情况。例如：
<syntaxhighlight lang="css">
/* 传统写法 */
header h1,
main h1,
footer h1 {
  font-size: 2rem;
}

/* 使用 :where() 简化 */
:where(header, main, footer) h1 {
  font-size: 2rem;
}
</syntaxhighlight>

=== 重置样式 ===
由于 `:where()` 的特异性为 0，它非常适合用于重置样式或提供默认样式，这些样式可以轻松被覆盖：
<syntaxhighlight lang="css">
/* 低特异性重置样式 */
:where(ul, ol) {
  padding-left: 0;
  list-style: none;
}

/* 后续可以轻松覆盖 */
article ul {
  padding-left: 2em;
  list-style: disc;
}
</syntaxhighlight>

=== 框架和组件开发 ===
在CSS框架或组件库中，`:where()` 可以确保开发者提供的样式不会意外覆盖用户的自定义样式：
<syntaxhighlight lang="css">
/* 框架中的样式 */
:where(.framework-button) {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
}

/* 用户可以轻松覆盖 */
.user-button {
  padding: 1em 2em;
}
</syntaxhighlight>