当前位置：首页 > news >正文

Web前端开发： :where(伪类函数选择器)

news 2025/7/12 5:55:04

:where(伪类函数选择器)：

:where() 是 CSS Selectors Level 4 规范中引入的一个强大的伪类函数选择器，它允许开发者以简洁的方式编写复杂的选择器，同时具有独特的优先级特性。

核心概念：

:where() 伪类函数选择器与 :is() 非常相似，但有一个关键区别：它不会增加选择器的优先级权重。

基本语法：

:where(selector1, selector2, ..., selectorN) {/* 样式规则 */
}

核心特性：

优先级归零：:where() 内的选择器不会增加整个选择器的优先级
简化选择器：减少重复的选择器代码
容错机制：忽略无效选择器而不破坏整个规则
嵌套支持：支持多层嵌套使用

应⽤场景示例：

1、降低选择器的特异性

:where() 选择器可以⽤来降低特定规则的特异性，使得这些规则更容易被其他样式覆盖。这在重置或归⼀化样式时⾮常有⽤。

:where(.class1, .class2) {color: black;
}

在这个示例中， .class1 和 .class2 的特异性被降低，它们将颜⾊设置为⿊⾊。

2、避免特异性战争

当你不希望样式规则之间发⽣特异性冲突时， :where() 是⼀个有⽤的⼯具。

:where(header, main, footer) h1 {font-size: 2em;
}

这个例⼦中，⽆论 header , main , footer 的特异性如何， h1 标签总是应⽤相同的字体⼤⼩。

3、与 :is() 选择器结合

:where() 可以与 :is() 选择器结合使⽤，以控制样式规则的特异性。

:where(article, section) :is(h1, h2, h3) {margin-top: 0;
}

在这个示例中，⽆论 article 或 section 的特异性如何， h1 , h2 , h3 标签的上边距都会被设置为0。

完整示例与演示：

代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS :where() 伪类函数选择器</title><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);padding: 20px;min-height: 100vh;}.container {max-width: 1200px;margin: 0 auto;background-color: rgba(255, 255, 255, 0.95);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);overflow: hidden;}header {background: linear-gradient(to right, #3498db, #2c3e50);color: white;padding: 2rem;text-align: center;border-bottom: 5px solid #2980b9;}h1 {font-size: 2.8rem;margin-bottom: 1rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.subtitle {font-size: 1.4rem;opacity: 0.9;max-width: 800px;margin: 0 auto;}.content {display: flex;flex-wrap: wrap;padding: 30px;gap: 30px;}.explanation,.demo {flex: 1;min-width: 300px;background: white;border-radius: 10px;padding: 25px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}h2 {color: #2c3e50;border-bottom: 3px solid #3498db;padding-bottom: 10px;margin-bottom: 20px;font-size: 1.8rem;}h3 {color: #3498db;margin: 15px 0 10px;}.code-block {background: #2c3e50;color: #ecf0f1;padding: 15px;border-radius: 8px;font-family: 'Courier New', monospace;margin: 15px 0;overflow-x: auto;}.comment {color: #95a5a6;font-style: italic;}.selector {color: #e74c3c;}.property {color: #3498db;}.value {color: #2ecc71;}/* :where() 选择器演示 */:where(section, article, aside) :where(h2, h3) {color: #9b59b6;border-left: 4px solid #9b59b6;padding-left: 10px;}/* 这个规则会覆盖上面的 :where() 规则 */section h2 {color: #e74c3c;border-left: 4px solid #e74c3c;}/* 优先级演示 */:where(#priority-demo, .priority-class) p {background-color: #3498db;color: white;padding: 10px;border-radius: 4px;}.priority-class p {background-color: #2ecc71;}/* 容错机制演示 */:where(.valid-class, :invalid-selector) p {background-color: #f1c40f;color: #333;padding: 10px;border-radius: 4px;}.demo-container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-top: 20px;}.demo-box {background: #f8f9fa;border: 1px solid #ddd;border-radius: 8px;padding: 20px;text-align: center;transition: all 0.3s ease;}.demo-box:hover {transform: translateY(-5px);box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);background: #fff;}.demo-box h3 {margin-top: 0;color: #2c3e50;}.priority-demo {background: #f0f7ff;padding: 15px;border-radius: 8px;margin-top: 20px;}footer {text-align: center;padding: 20px;background: #2c3e50;color: white;margin-top: 30px;border-top: 5px solid #3498db;}.browser-support {display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;margin-top: 15px;}.browser {background: #34495e;padding: 8px 16px;border-radius: 30px;font-size: 0.9rem;}@media (max-width: 768px) {.content {flex-direction: column;}h1 {font-size: 2.2rem;}}</style>
</head><body><div class="container"><header><h1>CSS `:where()` 伪类函数选择器</h1><p class="subtitle">零优先级选择器，创建易于覆盖的基础样式</p></header><div class="content"><div class="explanation"><h2>:where() 是什么？</h2><p><strong>:where()</strong> 伪类函数选择器接受一个选择器列表作为参数，匹配列表中任意选择器可以选择的元素，但<strong>不会增加选择器的优先级</strong>。</p><div class="demo-box"><h3>核心优势</h3><ul><li><strong>零优先级</strong>：不会增加选择器权重，易于覆盖</li><li><strong>代码简化</strong>：减少选择器列表中的重复</li><li><strong>容错机制</strong>：忽略无效选择器而不破坏整个规则</li><li><strong>嵌套支持</strong>：支持多层嵌套使用</li></ul></div><h3>基本语法</h3><div class="code-block"><span class="comment">/* 匹配header或footer中的h1或h2元素 */</span><br><span class="selector">:where(header, footer) :where(h1, h2)</span> {<br>&nbsp;&nbsp;<span class="property">color</span>: <span class="value">#9b59b6</span>;<br>}</div><h3>与 :is() 的对比</h3><div class="code-block"><span class="comment">/* :is() - 优先级基于参数 */</span><br><span class="selector">:is(header, footer) h1</span> { <span class="comment">/* 优先级: 0,0,2 */</span>}<br><br><span class="comment">/* :where() - 优先级为零 */</span><br><span class="selector">:where(header, footer) h1</span> { <span class="comment">/* 优先级: 0,0,0*/</span> }</div><h3>使用场景</h3><ul><li>CSS重置和基础样式</li><li>主题和框架开发</li><li>需要轻松覆盖的通用样式</li><li>简化复杂的选择器组</li></ul></div><div class="demo"><h2>实际演示</h2><h3>标题样式</h3><p>使用 :where() 设置基础标题样式：</p><div class="demo-container"><section class="demo-box"><h2>Section 标题</h2><p>基础样式来自 :where()，但被后续规则覆盖</p></section><article class="demo-box"><h2>Article 标题</h2><p>保持 :where() 设置的紫色样式</p></article><aside class="demo-box"><h3>Aside 子标题</h3><p>保持 :where() 设置的紫色样式</p></aside></div><div class="priority-demo"><h3>优先级演示</h3><p>:where() 规则优先级为0，容易被覆盖：</p><div class="demo-container"><div id="priority-demo" class="demo-box"><h3>ID选择器元素</h3><p>使用 :where() 设置蓝色背景</p></div><div class="priority-class demo-box"><h3>类选择器元素</h3><p>:where() 样式被后续规则覆盖为绿色</p></div></div></div><h3>容错机制</h3><p>:where() 忽略无效选择器，应用有效部分：</p><div class="demo-container"><div class="valid-class demo-box"><h3>有效选择器</h3><p>应用了 :where() 的黄色背景</p></div><div class="demo-box"><h3>普通元素</h3><p>没有应用特殊样式</p></div></div><div class="demo-box"><h3>浏览器支持</h3><p>:where() 在现代浏览器中得到良好支持：</p><div class="browser-support"><div class="browser">Chrome 88+</div><div class="browser">Firefox 78+</div><div class="browser">Safari 14+</div><div class="browser">Edge 88+</div></div></div></div></div><footer><p>CSS :where() 伪类函数选择器演示 | 创建零优先级基础样式</p><p>提示：:where() 特别适合用于CSS重置和基础样式框架</p></footer></div>
</body></html>

效果展示：