我們如何在 CSS 中將後代元素分組？

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

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

後代樣式的困境

考慮下面的表格範例：

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

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

<code class="css">#myTable th, #myTable td {}</code>

但是，這種方法在以下情況下顯得冗長乏味：處理大量元素。

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

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

<code class="css">#myTable (th, td) {}</code>

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

2008 年之前提案的徒勞

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

最近的發展和一線希望

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

替代解決方案

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

• 使用* 選擇器：

  <code class="css">#myTable tr > * {}</code>

  登入後複製

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

• 堅持使用冗長的th, td 方法來獲得最大性能

結論

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

以上是我們如何在 CSS 中將後代元素分組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！