为什么不能在 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中文网其他相关文章！