為什麼 CSS 沒有後代分組功能？

為什麼 CSS 選擇器缺乏後代分組功能

在 CSS 中，為一組嵌套元素分配樣式可能很麻煩。考慮一個 HTML 表格，您想要在其中設定所有列標題和單元格的樣式。您必須使用以下選擇器：

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

使用以下語法似乎是合乎邏輯的：

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

歷史背景

但是，這樣的語法並不存在，因為直到2008 年才以:any() 偽類的形式提出建議。

早期瀏覽器實作

Mozilla 在2010 年首次實現為:-moz-any()：

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

WebKit 提出了與:-webkit-any()類似的方法：

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

但是，使用這兩個前綴都需要複製規則集，從而使程式碼變得多餘。

現代提案

選擇器等級4 草稿引入了:matches():

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

此提案仍在開發中，限制了瀏覽器支援。

表格樣式的解決方法

對於表格，您可以使用通用選擇器* 來定位th 和td 元素：

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

為了提高性能，您可能仍然更喜歡較長的形式。

以上是為什麼 CSS 沒有後代分組功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！