为什么不能在 CSS 选择器中对后代进行分组? [英] Why can't you group descendants in a CSS selector?

问题描述

如果您想为一组后代分配相同的样式，为什么没有一种简单的方法来使用 CSS 呢?

假设你有一个如下的 HTML 表格:

<table id='myTable'><tr><th></th><th></th><th></th></tr>...<tr><td></td><td></td><td></td></tr></表>

为什么必须使用以下选择器设置所有列标题和单元格的样式?

#myTable th, #myTable td {}

为什么没有类似下面的语法?

#myTable (th,td) {}

解决方案

<块引用>

为什么没有类似下面的语法?

#myTable (th,td) {}

很简单，因为没有人费心提出有用的语法...直到最近(相对于您发布此内容的时间)作为 2008 年，作为 :any() 伪类.稍后对此进行了更深入的讨论.

第一个实现从 Mozilla 浮出水面，尽管迟到 2010 年，以 :-moz-any():

#myTable :-moz-any(th, td) {}

次年，建议WebKit效仿，与 :-webkit-any():

#myTable :-webkit-any(th, td) {}

但是，如果您现在尝试同时使用这两个前缀，那么 由于选择器解析规则，您将不得不复制规则集，使您的代码更长并破坏伪类的预期目的:

#myTable :-moz-any(th, td) {}#myTable :-webkit-any(th, td) {}

这使得在面向公众的代码中使用前缀选择器几乎毫无意义.除了供应商特定的代码之外，我看不到它们在任何地方的合法用途，这意味着您可能不会在同一个样式表中一起使用它们.

新的 Selectors 4 级工作草案有一个关于 :matches() 伪类，它基于原始的 :any() 提案，但随着草案的修订可能会看到某些增强:

#myTable :matches(th, td) {}

当然，因为它是一个新的草案，所以不要指望浏览器支持要很久以后.

在对 th 和 td 元素都进行样式设置的非常特殊的情况下，您可以使用 * 代替，假设没有任何 此表中的 tr 元素将永远包含单元格元素以外的子元素，例如 script 或 template:

#myTable tr >* {}

但是，如果您是性能迷并且讨厌 * 选择器，那么您将不得不长期坚持下去.

If you want to assign the same style to a group of descendants, why isn't there an easy way to do this with CSS?

Say you have an HTML table as follows:

<table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  .
  .
  .
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Why do you have to style all column headings and cells with the following selector?

#myTable th, #myTable td {}

Why isn't there a syntax similar to the following?

#myTable (th,td) {}

解决方案

Why isn't there a syntax similar to the following?

#myTable (th,td) {}

Quite simply because nobody bothered to propose a useful syntax... until as recently (relative to the time you posted this anyway) as 2008, as an :any() pseudo-class. This was discussed in greater depth a little later.

The first implementation surfaced from Mozilla, albeit as late as 2010, in the guise of :-moz-any():

#myTable :-moz-any(th, td) {}

The following year, it would be suggested that WebKit follow suit, with :-webkit-any():

#myTable :-webkit-any(th, td) {}

But if you were to try to use both prefixes together right now, then due to selector parsing rules you would have to duplicate the rulesets, making your code even longer and defeating the intended purpose of the pseudo-class:

#myTable :-moz-any(th, td) {}
#myTable :-webkit-any(th, td) {}

Which makes using the prefixed selectors in public-facing code all but pointless. I can see no legitimate use for them anywhere other than vendor-specific code, which means you probably won't be using them together, in the same stylesheet.

The new Selectors level 4 working draft has a proposal for a :matches() pseudo-class, which is based on the original :any() proposal but may see certain enhancements as the draft is revised:

#myTable :matches(th, td) {}

Of course, since it's a new draft, don't expect browser support until much later.

In the very specific case of styling both th and td elements, you could use * instead assuming that none of the tr elements in this table will ever contain children other than cell elements, such as script or template:

#myTable tr > * {}

But if you're a performance junkie and hate the * selector, you'll have to stick with doing it the long way.

这篇关于为什么不能在 CSS 选择器中对后代进行分组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！