5

如果您想为一组后代分配相同的样式，为什么没有一种简单的方法可以使用 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 {}

为什么没有类似于以下的语法？

#myTable (th,td) {}
4

4 回答 4

9

为什么没有类似于以下的语法？

#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此表中的任何元素都不会包含单元格元素以外的子元素，例如scriptor template：

#myTable tr > * {}

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

于 2012-08-02T21:31:20.113 回答
2

您可以使用供应商特定的-moz-any()和-webkit-any().

请参阅MDN 参考资料，以及W3C对:matches()伪属性的推荐。

干杯!

于 2011-09-18T17:30:36.383 回答
1

您可能想查看 SASS - http://sass-lang.com

它允许您以更明智的方式编写 CSS（类似于您建议的方式），但 ti 仍然可以编译为普通的旧 CSS。

例如：

#myTable{
    background: #CCC;

    tr{
      border: 1px solid #EEE;
    }

    td{
      background: blue;
    }
}
于 2012-08-02T21:47:48.687 回答
0

如果不使用 W3C，您可以将 jQuery 用于类似的事情

$('#myTable').find('tr, td');

当然，JS 并不总是启用的，依赖它也不是一个好主意。你只需要列出你所有的选择器！

于 2009-04-29T03:48:50.517 回答