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