为什么不能在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> 
< / table> 
  

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

  #myTable th，#myTable td {} 
 
 lang-css prettyprint-override>  #myTable（th，td）{} 
  
 
 
解决方案
 
 
 
 
 
为什么没有类似下面的语法？
  #myTable（th，td）{} 
  
 
 
很简单，因为没有人打算提出一个有用的语法...直到最近（相对于你发布的时间）为2008，作为 ：any（）伪类。稍后，更深入地讨论了这一点。。 / p> 
 
 
第一个实现从Mozilla开始，尽管到了2010年，以 ： -  moz-any（） ：
  #myTable：-moz-any（th，td）{} 
  
第二年，建议Webkit遵循， ： -  webkit-any（） ：
  #myTable：-webkit-any ，td）{} 
  
但是如果你现在尝试使用两个前缀， a href =http://stackoverflow.com/questions/8317954/ignoring-webkit-specific-css-selector-in-firefox/8318202#8318202>由于选择器解析规则，您必须复制规则集，使您的代码更长时间 ，并打败伪类的预期目的：
  #myTable：-moz-any（th，td）{} 
 #myTable：-webkit-any（th，td）{} 
  
这使得在面向公众的代码中使用前缀选择器几乎无意义。我可以看到没有合法使用他们的任何地方，除了供应商特定的代码，这意味着你可能不会一起使用它们在同一样式表。
 
 
 
新的选择器第4级工作草案有一个提案，用于 ：matches（）伪类，它基于原始的：any（）提议，但是可以看到在修改草案时的某些增强： p> 
 
 
  #myTable：matches（th，td）{} 
  
当然，由于它是一个新的草稿，直到很久以后才期待浏览器支持。
 
 
 
在对 th 和 td 元素进行造型的特定情况下，您可以使用 * ，假设此表中的 tr 元素不会包含除单元格元素以外的其他子元素，例如脚本或模板：
  #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屋！