Web前端： :is(通用選擇器)

:is(通用選擇器)

????????CSS中的 :is() 選擇器是?個功能強?的偽類選擇器，它?于簡化復雜的選擇器，特別是在處理多個相似的選擇器時。:is() 選擇器接受 ?個選擇器列表作為參數，然后匹配列表中任何?個選擇器所選中的元素。

:is() 選擇器核心概念

基本語法

:is(selector1, selector2, ..., selectorN) {/* 樣式規則 */
}

核心特性

簡化選擇器列表：將多個選擇器組合成一個規則
容錯機制：忽略無效選擇器而不使整個規則失效
優先級計算：采用參數列表中最高的優先級值
嵌套支持：可以嵌套使用多個?:is()?選擇器

對比傳統方法與?:is() 方法?

/* 傳統方法 - 冗長且重復 */
header h1, 
header h2, 
header h3, 
section h1, 
section h2, 
section h3 {color: #3498db;
}/* :is() 方法 - 簡潔高效 */
:is(header, section) :is(h1, h2, h3) {color: #3498db;
}

示例：

1、合并多個選擇器

如果你想為多個不同的元素應?相同的樣式，可以使? :is() 來簡化選擇器：

:is(h1, h2, h3, .special) {font-weight: bold;
}

2、簡化復雜的選擇器

:is() 也可以?來簡化嵌套的選擇器，使代碼更易讀：

article :is(h1, h2, h3) {color: darkblue;
}

這將選擇 article 元素內部的所有 h1、h2、h3 元素，并將它們的?本顏?設置為深藍?。

3、結合偽類

:is() 可以與偽類結合使?：

:is(a, button):hover {background-color: yellow;
}

這將會選擇所有 a 元素和 button 元素在懸浮狀態下，為它們設置??背景。

完整演示示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS :is() 通用選擇器深度解析</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: 3rem;margin-bottom: 1rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.subtitle {font-size: 1.5rem;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: 2rem;}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;}.selector {color: #e74c3c;}.property {color: #3498db;}.value {color: #2ecc71;}/* :is() 選擇器演示 */:is(section, article, aside) :is(h2, h3) {color: #e74c3c;border-left: 4px solid #e74c3c;padding-left: 10px;}:is(.demo-container, .explanation) p {line-height: 1.8;margin-bottom: 15px;}:is(.card, .note) {background: #f9f9f9;border-radius: 8px;padding: 15px;margin: 15px 0;border-left: 4px solid #3498db;}.priority-demo :is(#high-priority, .medium-priority) p {background-color: #2ecc71;color: white;padding: 10px;border-radius: 4px;}/* 優先級演示 */.priority-demo #high-priority p {background-color: #e74c3c;}/* 容錯機制演示 */:is(.valid, :invalid-selector) p {background-color: #9b59b6;color: white;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: transform 0.3s, box-shadow 0.3s;}.demo-box:hover {transform: translateY(-5px);box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);}.demo-box h3 {margin-top: 0;color: #2c3e50;}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: 20px;flex-wrap: wrap;margin-top: 15px;}.browser {background: #34495e;padding: 10px 20px;border-radius: 30px;font-weight: bold;}@media (max-width: 768px) {.content {flex-direction: column;}h1 {font-size: 2.2rem;}}</style>
</head>
<body><div class="container"><header><h1>CSS `:is()` 通用選擇器</h1><p class="subtitle">簡化CSS選擇器，減少代碼冗余，提高可維護性</p></header><div class="content"><div class="explanation"><h2>什么是 :is() 選擇器？</h2><p><strong>:is()</strong> 偽類函數接受一個選擇器列表作為參數，并選擇該列表中任意一個選擇器可以選擇的元素。這對于以更緊湊的形式編寫大型選擇器非常有用。</p><div class="card"><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">/* 傳統方式 */</span><br>.main <span class="selector">header</span> <span class="selector">h1</span>,<br>.main <span class="selector">section</span> <span class="selector">h1</span>,<br>.main <span class="selector">article</span> <span class="selector">h1</span> {<br>&nbsp;&nbsp;<span class="property">color</span>: <span class="value">#e74c3c</span>;<br>}<br><br><span class="comment">/* 使用 :is() */</span><br>.main <span class="selector">:is(header, section, article)</span> <span class="selector">h1</span> {<br>&nbsp;&nbsp;<span class="property">color</span>: <span class="value">#e74c3c</span>;<br>}</div><h3>優先級規則</h3><p>:is() 的優先級由其參數列表中優先級最高的選擇器決定：</p><div class="code-block"><span class="comment">/* 優先級 = ID選擇器 (1,0,0) */</span><br><span class="selector">:is(#header, .main-header)</span> { }<br><br><span class="comment">/* 優先級 = 類選擇器 (0,1,0) */</span><br><span class="selector">:is(.header, div)</span> { }</div></div><div class="demo"><h2>實際演示</h2><h3>簡化標題樣式</h3><p>以下標題樣式通過 :is() 統一設置：</p><div class="demo-container"><section class="demo-box"><h2>Section 標題</h2><p>這個標題應用了 :is() 設置的樣式</p></section><article class="demo-box"><h2>Article 標題</h2><p>這個標題應用了 :is() 設置的樣式</p></article><aside class="demo-box"><h3>Aside 子標題</h3><p>這個子標題同樣應用了 :is() 樣式</p></aside></div><h3>優先級演示</h3><div class="priority-demo"><div id="high-priority" class="demo-box"><h3>ID 選擇器</h3><p>這個元素有 ID 選擇器，優先級更高</p></div><div class="medium-priority demo-box"><h3>類選擇器</h3><p>這個元素只有類選擇器</p></div></div><h3>容錯機制演示</h3><div class="demo-container"><div class="valid demo-box"><h3>有效選擇器</h3><p>這個元素使用了有效的選擇器</p></div><div class="demo-box"><h3>普通元素</h3><p>這個元素沒有特殊樣式</p></div></div><div class="note"><h3>瀏覽器支持情況</h3><p>:is() 選擇器在現代瀏覽器中得到良好支持：</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 :is() 通用選擇器演示 | 使用現代CSS簡化您的樣式表</p><p>提示：:is() 選擇器可以替代 :matches() 和 :any()（已棄用）</p></footer></div>
</body>
</html>

效果展示：