我们如何在 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>

但是，这种方法在以下情况下显得冗长乏味：处理大量元素。

(th, td) 选择器：错过的机会

更直观的语法是使用类似于以下的分组选择器:

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

不幸的是，CSS 中不存在这样的语法。

2008 年之前提案的徒劳

事实证明，缺乏后代分组选择器一直是一个长期问题。早期尝试引入一个伪类，例如 2008 年提出的 :any() 伪类，但没有获得关注。

最近的发展和一线希望

然而，选择器级别 4 工作草案重新引入了分组伪类 :matches() 的概念。虽然此提案显示出希望，但浏览器支持仍有很长的路要走。

替代解决方案

与此同时，有一些针对后代分组的解决方法：

• 使用 * 选择器：

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

  登录后复制

  （请注意，这假设 tr 元素仅包含 td 或 th 元素，而不包含其他元素）

• 坚持使用冗长的 th, td 方法来获得最大性能

结论

CSS 中缺乏后代分组选择器多年来一直是一个持续存在的问题。尽管最近的提议带来了一线希望，但广泛的浏览器支持仍然难以实现。在那之前，开发人员必须依赖替代方法，或者接受现有 th、td 选择器的冗长。

以上是我们如何在 CSS 中对后代元素进行分组？的详细内容。更多信息请关注PHP中文网其他相关文章！