css使用 :where() 来简化大型 CSS 选择器列表
使用 :where() 来简化大型 CSS 选择器列表
where() 是 CSS 中的一个非常有用的伪类函数，它属于 CSS Selectors Level 4 规范
:where(selector1, selector2, selector3, ...) {/* 样式规则 */
}
-
零特异性（Zero Specificity）
这是 where() 最重要的特性。它自身不会增加选择器的特异性权重。 -
简化复杂选择器
可以帮助简化嵌套较深的选择器。
/* 传统写法 */
nav ul li a,
aside ul li a,
footer ul li a {color: #333;
}/* 使用 :where() */
:where(nav, aside, footer) ul li a {color: #333;
}
- 易于覆盖样式
由于零特异性，使用 :where() 的样式很容易被覆盖。
css
/* 基础样式 - 易于覆盖 */
:where(.card, .panel, .widget) {padding: 1rem;border: 1px solid #ccc;
}/* 可以轻松覆盖 */
.card {padding: 2rem; /* 这个样式会生效 */
}
/* 使用 :where 重置多个容器的内部元素间距 */
:where(.post, .sidebar, .card) :where(h1, h2, h3, h4, h5, h6) {margin-top: 0;margin-bottom: 0.5em;
}:where(.post, .sidebar, .card) :where(ul, ol) {padding-left: 1.5em;
}:where(.post, .sidebar, .card) :where(p) {line-height: 1.6;margin-bottom: 1em;
}
/* 组件基础样式（易于覆盖） */
.my-component :where(.title, .heading) {font-size: 1.2rem;margin-bottom: 1rem;
}.my-component :where(.button, .btn) {padding: 0.5rem 1rem;background: #007bff;color: white;
}/* 用户可以轻松自定义 */
.my-component .title {font-size: 1.5rem; /* 这个会生效 */
}
/* 移动端优化 */
@media (max-width: 768px) {:where(nav, header, footer) {padding: 0.5rem;}:where(.card, .article, .sidebar) {margin-bottom: 1rem;}
}
当您需要编写基础样式、重置样式或希望样式容易被覆盖时，:where() 是最佳选择。
See the Pen css`:where()` by liu874396180 ( @liu874396180) on CodePen.