Question

我使用bootstrap。表td是通过bootstrap填充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

这是片段，任何帮助将不胜感激。提前谢谢！

＆＃13;

table, td {
  border: 1px solid;
}

＆＃13;

<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>

＆＃13;

Answer 1

在CSS选择器4中，有a functional pseudo-class :matches，允许进行此类分组：

window

不幸的是，它目前仅适用于Safari（Chrome和Firefox也对其旧表单.table > *:matches(thead, tbody, tfoot) > tr > *:matches(th, td) { ... }和:-webkit-any()提供实验性支持，但它不是很有帮助。）

单个通用选择器:-moz-any()无法匹配多个级别。它的意思是＆＃34;任何单个元素＆＃34;。但您可以按*匹配任意元素的两个级别。

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

＆＃13;

* > *

＆＃13;

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

＆＃13;

<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">  <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>选择器具有其参数的特异性，在这种情况下，ID的特异性，肯定高于任何类的特异性。但如果有必要，您仍然可以使用:not()覆盖它。您可以指定标记中实际不存在的任何虚构ID。

Answer 2

使用选择器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>

Answer 3

通常，这就是使用SCSS或LESS等CSS预处理器的原因。为了在更好的语法方面更能在功能上代表你的代码，即做更多的事情并少写。

您想要的SCSS版本是：

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

Answer 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
}

Answer 5

试试这个

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

如果你想要＆＃34; th＆＃34;也有px填充

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

Answer 6

你可以这样试试

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

如何分组选择多元素CSS？

6 个答案: