要選擇一個元素及其所有后代元素:

.media, .media * {color: #f00;}

是否只有一個選擇器可以使用，而不是用逗號分隔的兩個選擇器？我正在尋找一種更有效的方式來打這個。

有了XPath，就有了后代或自我軸

但是CSS中沒有這樣的選擇器。

2023年，對CSS語法和可用偽類的最新添加帶來了一些有趣的替代方法來解決這一問題(盡管仍不如真正的本機自我或后代組合子理想)。

讓我們考慮一個假設(shè)。標識站點創(chuàng)作內(nèi)容的散文類，可以通過例如& lt文章& gt或者& ltsection & gt具有嵌套結(jié)構(gòu)的塊，或者在例如& ltp & gt或者& ltblockquote & gt直接包含文本的元素。

只有嚴格的后代組合子和傳統(tǒng)的CSS語法，諸如& ltp & gt并且& ltblockquote & gt需要添加一個(潛在的非語義的)包裝器，比如& ltdiv & gt元素。

或者，CSS規(guī)則可以以既匹配自身又匹配后代的方式編寫，但是這涉及重復(fù)(并且容易出錯)的樣板文件:

h1.prose, .prose h1 {...}
h2.prose, .prose h2 {...}
h3.prose, .prose h3 {...}
h4.prose, .prose h4 {...}
h5.prose, .prose h5 {...}
h6.prose, .prose h6 {...}

p.prose, .prose p {...}

blockquote.prose, .prose blockquote {...}

/* And so forth... */

利用最近的CSS開發(fā)，上述內(nèi)容可以用以下方式重寫:

.prose, .prose * {
    
    &:is(h1) {...}
    &:is(h2) {...}
    &:is(h3) {...}
    &:is(h4) {...}
    &:is(h5) {...}
    &:is(h6) {...}
    
    &:is(p) {...}

    &:is(blockquote) {...}

    /* Alternatively, the :where() pseudo-class can also be used,
       which differs in how specificity is calculated. */
}

顯然,& amp:是(...)部分仍然是樣板，但重復(fù)已經(jīng)明顯減少，可以認為是一種進步。

警告:截至2023年5月，瀏覽器對原生CSS嵌套的支持仍在進行中(參見https://caniuse.com/css-nesting ),利用它的CSS代碼應(yīng)該轉(zhuǎn)換為非嵌套語法(例如，使用postcss-nesting插件)。is()偽類享有更廣泛的支持(參見https://caniuse.com/?搜索=is)。