如何分组选择多元素CSS？答案

【问题标题】：How to grouply select multi elements CSS?如何分组选择多元素CSS？
【发布时间】：2017-04-20 19:59:15
【问题描述】：

我使用引导程序。表 td 通过引导程序填充 8px。但是我只需要2px的填充，所以我用这个样式表来做布局。

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 2px;
}

我想知道如何更轻松地选择 td？我对这种方式更好奇一步一步。

.table > (thead, tbody, tfoot) > (td , th)

或者这样：*可以匹配很多层吗？

.table > * > td

这是sn-p，任何帮助将不胜感激。提前致谢！

table, td {
  border: 1px solid;
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<html>
  <head>
    <style>
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
      padding: 1px;
    }
    </style>
  </head>
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>
</html>

【问题讨论】：

.table > * > tr > td, .table > * > tr > th?
@kukkuz 它不起作用。您可以在我的问题的 sn-p 中查看。
我用你的 sn-p 测试了@kukkuz 的建议，它确实有效。
@BoltClock 我只是使用 .table > * > tr > td, .table > * > tr > th 来替换我的样式表，td 填充也是 8px。它需要添加 !important 才能使其正常工作。在问题中，不需要 !important。

标签： html css css-selectors html-table

【解决方案1】：

一般来说，这就是使用 SCSS 或 LESS 等 CSS 预处理器的原因。以更好的语法方式在功能上更充分地表示您的代码，即多做少写。

你想要的 SCSS 版本是：

table {
  thead,  tbody, tfoot {
    tr {
      td, th {
        padding: 2px;
      }
    }
  }
}

【讨论】：

【解决方案2】：

在 CSS 选择器 4 中，有 a functional pseudo-class :matches，它允许这样的分组：

.table > *:matches(thead, tbody, tfoot) > tr > *:matches(th, td) { ... }

不幸的是，它目前只能在 Safari 中运行（Chrome 和 Firefox 也对其旧形式 :-webkit-any() 和 :-moz-any() 提供实验性支持，但这并不是很有帮助）。

单个通用选择器* 无法匹配多个级别。它的意思是“任何单个元素”。但是你可以通过* > *匹配任意元素的两层。

我建议使用 hack 来增加这样的特异性：

.table > * > tr > *:not(#any-fictional-id) {
   padding: 1px;
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- whatever... -->
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>

:not()选择器有其参数的特异性，在这种情况下是ID的特异性，绝对高于任何类的特异性。但如有必要，您仍然可以使用!important 覆盖它。您可以指定标记中实际不存在的任何虚构 ID。

【讨论】：

我在这里对#any-existing-id 一无所知。
我编辑了我的答案。重点是指定虚构的 ID，它实际上不匹配任何东西（因此可以通过:not() 匹配）。
如果选择器的特异性只需要与.table > (type selector) > tr > (type selector)相当，我推荐.table > * > tr > *:not(_):not(_)而不是ID选择器。见stackoverflow.com/questions/28299817/…
@BoltClock，我同意（尽管 _ 作为标签名称看起来有点不寻常）。在这种情况下，为了便于阅读，我什至会把它写成.table > :not(_) > tr > :not(_)（或者甚至写成.table > :not(span) > tr > :not(span)，因为表后代的结构是完全可以预测的，而且它们永远不会是spans）。但我假设（可能是错误的）一些 Bootstrap 类也将被覆盖。
哦，是的，每个复合选择器都有一个 :not() 看起来更具可读性。当然，类型选择器可以是任何对用例有意义的东西。

【解决方案3】：

使用选择器作为table.table > * > tr > th, table.table > * > tr > td设置填充值

table, td {
  border: 1px solid;
}

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
<html>
  <head>
    <style>
    .table > * > tr > th, .table > * > tr > td {
      padding: 1px !important;
    }
    </style>
  </head>
  <div class="container">
    <table class="table">
      <thead>
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
      </tbody>
    </table>
  </div>
</html>

【讨论】：

这也是覆盖作为引导程序，你可以检查它。 padding 是 bootstrap 的 8px。

【解决方案4】：

试试：

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th{
    border-top: 1px solid #e6e6e6
}

【讨论】：

为什么 OP 应该“尝试”这个？ 好的答案将始终解释所做的事情以及为什么以这种方式完成，不仅适用于 OP，而且适用于 SO 的未来访问者。
谢谢你的解释兄弟，
这种方式可以通过css轻松选择td或更多选择器
@bub：上帝啊，这些答案中有超过一半是“试试这个”的答案。难以置信。
@bub：感谢您抽出时间留下与上下文相关的评论，而不是仅仅选择“这不能提供问题的答案”。继续前进。

【解决方案5】：

你可以这样试试

table td, table th {
  border: 1px solid;
}

【讨论】：

你能把我的问题的sn-p fork，然后检查你的答案吗？

【解决方案6】：

试试这个

table, td {
  border: 1px solid;
}
.table td {
  padding:2px !important;
}

如果您希望“th”也有 px 填充，那么

table, td {
  border: 1px solid;
}
.table td, .table th {
  padding:2px !important;
}

【讨论】：