新一代 CSS 選擇器：12 個技巧讓代碼量減少 70%
作者：JavaScript
本文分享一些新一代的CSS選擇器技巧，這些技巧不僅能讓你的代碼更簡潔，還能提升樣式表的可維護性。
CSS選擇器的使用技巧直接影響著我們的代碼質量和維護效率。分享一些新一代的CSS選擇器技巧，這些技巧不僅能讓你的代碼更簡潔，還能提升樣式表的可維護性。
1. :is() 選擇器：組合選擇的神器
:is()選擇器可以將多個選擇器分組，大幅減少重復代碼。
/* 之前的寫法 */
header p, main p, footer p {
line-height: 1.6;
}
/* 使用:is()的寫法 */
:is(header, main, footer) p {
line-height: 1.6;
}2. :where() 選擇器：零特異性的福音
:where()的功能類似:is()，但特異性為0，讓樣式更容易被覆蓋。
/* 特異性較高 */
article :is(header, footer) p {
color: #333;
}
/* 特異性為0，更容易覆蓋 */
article :where(header, footer) p {
color: #333;
}3. :has() 關系選擇器：父元素選擇的革命
:has()讓我們終于可以基于子元素選擇父元素。
/* 選擇包含圖片的段落 */
p:has(img) {
display: flex;
align-items: center;
}
/* 選擇后面有標題的段落 */
p:has(+ h2) {
margin-bottom: 2em;
}4. 屬性選擇器通配符匹配
使用屬性選擇器的通配符匹配可以更靈活地選擇元素。
/* 選擇所有數據屬性 */
[data-*="important"] {
font-weight: bold;
}
/* 選擇特定語言的元素 */
[lang|="en"] {
font-family: 'Arial', sans-serif;
}5. :nth-child() 進階用法
使用公式選擇特定元素，實現復雜的選擇模式。
6. :not() 多條件排除
新版:not()支持多個選擇器，大大增強了排除能力。
7. 層疊層級管理 @layer
使用@layer管理樣式優先級，減少特異性戰爭。
8. :focus-visible 智能焦點
更智能的焦點狀態管理，減少不必要的輪廓樣式。
9. :empty 空元素處理
優雅處理空元素，無需額外的類名標記。
10. 相鄰兄弟選擇器組合
靈活使用+和~選擇器，處理元素間關系。
11. 復合選擇器優化
組合多個選擇器條件，實現精確匹配。
12. 媒體查詢容器
使用容器查詢，實現更精確的響應式設計。
@container sidebar (min-width: 400px) {
.widget {
display: grid;
grid-template-columns: 1fr 1fr;
}
}責任編輯：趙寧寧
來源：
JavaScript
