為什麼 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中文網其他相關文章!