: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> <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>效果展示：
?
![[國家電網備考]計算機網絡](http://pic.xiahunao.cn/[國家電網備考]計算機網絡)
