為什麼不能在 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>

為什麼沒有更簡潔的語法，例如:

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

解決方案的演變

最初，沒有提出有用的語法，直到2008 年提出:any() 偽類。 Mozilla 在 2010 年將其實現為 :-moz-any()，隨後在 2011 年將其實作為 WebKit 的 :-webkit-any()。

但是，同時使用這兩個前綴需要重複規則集，從而達不到目的。因此，這些帶有前綴的選擇器現在被認為是不切實際的。

選擇器等級 4 工作草稿現在包含 :matches() 的提案，基於原始 :any() 但具有潛在的增強功能。但是，瀏覽器支援預計需要一些時間。

解決方法

對於專門設計th 和td 元素的樣式，您可以使用* 代替，假設tr 元素僅包含單元格元素：

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

或者，出於性能原因，您可能更喜歡較長的傳統方法。

以上是為什麼不能在 CSS 選擇器中對後代進行分組？的詳細內容。更多資訊請關注PHP中文網其他相關文章！