首页 > web前端 > css教程 > 正文

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

Mary-Kate Olsen
发布: 2024-11-02 14:32:02
原创
625 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!