我們如何在 CSS 選擇器中將後代分組？

在 CSS 選擇器中對後代進行分組

儘管通常需要對後代組進行樣式化，但 CSS 缺乏執行此任務的直接方法。考慮一個簡單的HTML 表格：

`

<th></th>
<th></th>
<th></th>

.
.
.

<td></td>
<td></td>
<td></td>

`

傳統上，設定所有列標題和單元格的樣式需要詳細選擇器：

#myTable th, #myTable td {}

為什麼我們不能使用這樣的語法：

#myTable (th,td ) {}

建議的解決方案

直到最近，還沒有在CSS 選擇器中對後代進行分組的標準解決方案。然而，已經提出了以下偽類：

• :-moz-any()：由 Mozilla 於 2010 年引入。
• ： -webkit-any()：建議用於 WebKit 瀏覽器，但未廣泛採用。

但是，使用這些帶有前綴的選擇器需要複製規則集，不建議用於面向公眾的程式碼。

未來發展

選擇器等級 4 工作草案基於原始 :any() 提案提出了 :matches() 偽類。這個新的偽類可能會在未來的修訂中提供增強功能。

解決方法

對於th 和td 元素樣式的特定情況，可以使用* 選擇器：

#myTable tr > * {}

這假設tr 元素只包含單元格元素。然而，對於注重效能的開發人員來說，這仍然不如詳細方法有效。

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