通用选择器而不是逗号分隔的元素

Posted 2023-03-06

【中文标题】通用选择器而不是逗号分隔的元素

【英文标题】：Universal selector instead of comma separated elements

【发布时间】：2017-06-19 06:41:23

【问题描述】：

我想在这样的表格中同时设置 th 和 td 元素的样式：

<table>
  <tr>
    <th>Abc</th>
    <td>Cde</td>
  </tr>
  <tr>
    <th>Abc</th>
    <td>Cde</td>
  </tr>
</table>

我不想给它添加类，所以我需要这样做：

tr td, tr thbackground:#dddddd;
tr:nth-child(even) td, tr:nth-child(even) thbackground:#ffffff;

但是......像下面那样做有什么缺点吗？

tr > *background:#dddddd;
tr:nth-child(even) > *background:#ffffff;

【问题讨论】：

我认为这样做没有任何问题，因为唯一的直系孩子是td 和th。如果您担心性能方面的问题，请阅读此答案here。

【参考方案1】：

没有；在最坏的情况下，您只会被仍然支持“避免通用选择器”教条的人大喊大叫。如果您仍然担心，因为您的页面非常复杂，包含数千个元素，那么您可以选择不使用它，但您只需要使用扩展的选择器列表，因为there isn't any cross-browser alternative available。