CSS選擇器的使用技巧直接影響著我們的代碼質(zhì)量和維護(hù)效率。分享一些新一代的CSS選擇器技巧，這些技巧不僅能讓你的代碼更簡(jiǎn)潔，還能提升樣式表的可維護(hù)性。

1. :is() 選擇器：組合選擇的神器

:is()選擇器可以將多個(gè)選擇器分組，大幅減少重復(fù)代碼。

/* 之前的寫法 */
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() 關(guān)系選擇器：父元素選擇的革命

:has()讓我們終于可以基于子元素選擇父元素。

/* 選擇包含圖片的段落 */
p:has(img) {
    display: flex;
    align-items: center;
}

/* 選擇后面有標(biāo)題的段落 */
p:has(+ h2) {
    margin-bottom: 2em;
}

4. 屬性選擇器通配符匹配

使用屬性選擇器的通配符匹配可以更靈活地選擇元素。

/* 選擇所有數(shù)據(jù)屬性 */
[data-*="important"] {
    font-weight: bold;
}

/* 選擇特定語(yǔ)言的元素 */
[lang|="en"] {
    font-family: 'Arial', sans-serif;
}

5. :nth-child() 進(jìn)階用法

使用公式選擇特定元素，實(shí)現(xiàn)復(fù)雜的選擇模式。

6. :not() 多條件排除

新版:not()支持多個(gè)選擇器，大大增強(qiáng)了排除能力。

7. 層疊層級(jí)管理 @layer

使用@layer管理樣式優(yōu)先級(jí)，減少特異性戰(zhàn)爭(zhēng)。

8. :focus-visible 智能焦點(diǎn)

更智能的焦點(diǎn)狀態(tài)管理，減少不必要的輪廓樣式。

9. :empty 空元素處理

優(yōu)雅處理空元素，無(wú)需額外的類名標(biāo)記。

10. 相鄰兄弟選擇器組合

靈活使用+和~選擇器，處理元素間關(guān)系。

11. 復(fù)合選擇器優(yōu)化

組合多個(gè)選擇器條件，實(shí)現(xiàn)精確匹配。

12. 媒體查詢?nèi)萜?/h4>

使用容器查詢，實(shí)現(xiàn)更精確的響應(yīng)式設(shè)計(jì)。

@container sidebar (min-width: 400px) {
    .widget {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}