首页  >  文章  >  web前端  >  为什么不能在 CSS 选择器中对后代进行分组?

为什么不能在 CSS 选择器中对后代进行分组?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-11-02 14:32:02614浏览

Why Can't You Group Descendants in CSS Selectors?

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn