用於後代分組的難以捉摸的CSS 選擇器

雖然CSS 為樣式元素提供了強大的選項，但一個值得注意的缺失是輕鬆將後代分組的能力。當對 HTML 表格等複雜元素進行樣式設計時，這種限制變得很明顯，其中為列標題和單元格分配相同的樣式需要繁瑣的選擇器。

後代樣式設計的困境

考慮下面的表示例：

  ...
  

要使用單一選擇器設定標題和儲存格的樣式，通常會使用：

#myTable th, #myTable td {}

但是，在處理大量元素時，這種方法顯得冗長乏味。

(th, td)選擇器：錯過的機會

更直觀的語法是使用類似於以下的分組選擇器：

#myTable (th, td) {}

不幸的是，CSS 中不存在這樣的語法。

Pre-2008 的徒勞提案

事實證明，缺乏後代分組選擇器一直是長期問題。早期嘗試引入一個偽類，例如 2008 年提出的 :any() 偽類，但沒有獲得關注。

最近的發展和一線希望

然而，選擇器級別 4 工作草案重新引入了分組偽類 :matches() 的概念。雖然此提案顯示出希望，但瀏覽器支援仍有很長的路要走。

替代解決方案

同時，有一些針對後代分組的解決方法：

• 使用* 選擇器：

  #myTable tr > * {}

  （請注意，這假設tr 元素只包含td 或th 元素，而不包含其他元素）

• 堅持使用詳細的th、td 方法以獲得最大性能

結論

CSS 中缺乏後代分組選擇器多年來一直存在的問題。儘管最近的提議帶來了一線希望，但廣泛的瀏覽器支援仍然難以實現。在那之前，開發人員必須依賴替代方法，或接受現有 th、td 選擇器的冗長。