Question

我想知道如何使用单行CSS更改多个表行的某些属性。例如，我想让三个表行都具有200px的高度。现在我的CSS看起来像这样：

.Radians

是否有更简单的方法为多个表行或元素设置相同的高度？以下是进一步解释的小提琴：https://jsfiddle.net/gk3o6w3t/2/

Answer 1

尝试这种方式：

#resume table tr:nth-child(5),
#resume table tr:nth-child(6),
#resume table tr:nth-child(7) {
    height:200px;
}

现在所有元素都具有相同的设置。

Answer 2

这就是你的小提琴演示中的内容：

table tr:first-child  { background-color: red; }
table tr:nth-child(2) { background-color: red; }
table tr:nth-child(3) { background-color: red; }
table tr:nth-child(4) { background-color: red; }

所以你的目标是表格的前四行。

要使用一行CSS定位相同的行，您可以执行以下操作：

table tr:nth-child(-1n + 4) { background-color: red; }

此计算表示：

(-1 * 0) + 4 = 4
(-1 * 1) + 4 = 3
(-1 * 2) + 4 = 2
(-1 * 3) + 4 = 1
(-1 * 4) + 4 = 0   /* starting here, the rule is ignored */
(-1 * 5) + 4 = -1  /* negative values are ignored */
       ...
       ...
       ...

这是完整的代码：

table{
  background-color:blue;
}

table tr:nth-child(-1n + 4){
  background-color:red;
};

<table>
  <th>My table</th>
  <tr>
    <td>first row</td>
  </tr>
  <tr>
    <td>second row</td>
  </tr>
  <tr>
    <td>third row</td>
  </tr>
</table>

Revised Fiddle

Answer 3

您可以使用：not（）过滤几个sibblings行。

table tr:nth-child(5) ~ tr:not(:nth-child(1n+8)){/* from 5 untill it reaches the eighth and sibblings */
  height:30px;
  background:lime;
}

<table>
  <thead>
    <tr>
      <th>th</th>
      <th>th</th>
      <th>th</th>
      <th>th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

Answer 4

如果你想匹配第i和第j（包括）之间的所有孩子，你可以使用选择器

:nth-child(n+i):nth-child(-n+j)

将i和j替换为数字。例如，在您的情况下，要选择第5，第6，第7个孩子，请使用

:nth-child(n+5):nth-child(-n+7)

li:nth-child(n+5):nth-child(-n+7) {
  background: green;
}

<ol>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>

如何使用单个CSS规则定位多个表行？

4 个答案: