58

如何调整下面的 CSS 选择器：

.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}

所以它适用于td列2〜4？

<table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table>
4

4 回答 4

92

您可以使用的另一种方法是：

.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}

这更清楚一些，因为它包含了范围 (2和4) 中的数字，而不必从末尾倒数。

它也更强大一些，因为您不必考虑项目的总数。

为了澄清：

:nth-child(n+X)     /* all children from the Xth position onward */
:nth-child(-n+x)    /* all children up to the Xth position       */

例子：

#nn div {
    width: 40px;
    height: 40px;
    background-color: black;
    display: inline-block;
    margin-right: 10px;
}

#nn div:nth-child(n+3):nth-child(-n+6) {
    background-color: blue;
}
<div id="nn">
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>    
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

于 2015-01-21T07:17:35.787 回答
49

你不能用一个单一的来做到这一点:nth-child()——你需要至少链接一个其他这样的伪类。例如，:nth-child()and的组合:nth-last-child()（n+2位表示分别从第二个孩子开始向前和向后计数）：

.myTableRow td:nth-child(n+2):nth-last-child(n+2){
background-color: #FFFFCC;
}

或者，不使用公式，只需排除:first-childand :last-child：

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}
于 2013-03-26T14:15:58.437 回答
2

如果你想选择元素 2 到 4，你可以这样做：

td:nth-child(-n+4):nth-child(n+2) {
  background: #FFFFCC;
}

提醒选择器链的顺序应该是从大到小。Safari 有一个错误阻止了这种技术的工作。

于 2019-09-25T07:38:45.963 回答
0

我创建了一个非常简单的代码，以便直观地清楚如何从同一页面上其他用户的响应中选择列或行。

https://codepen.io/luis7lobo9b/pen/XWaNYXz

在此处输入图像描述

<!doctype html>
<html lang="pt-br">
<head>
    <!-- https://stackoverflow.com/questions/15639247/css-selector-for-nth-range -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        table{margin: 50px auto;}
        thead tr{background-color: gray; font-weight: 700;}
        td{border: 1px solid black;padding: 2px 8px;}
        table tr:nth-child(n+2):nth-child(-n+3){background-color:blue;}
        table td:nth-child(n+2):nth-child(-n+3){background-color:red;}
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>AAA</td>
                <td>BBB</td>
                <td>CCC</td>
                <td>DDD</td>
                <td>EEE</td>
                <td>FFF</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
            <tr>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
                <td>333</td>
            </tr>
            <tr>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
                <td>444</td>
            </tr>
            <tr>
                <td>555</td>
                <td>555</td>
                <td>555</td>
                <td>555</td>
                <td>555</td>
                <td>555</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
于 2021-10-22T11:45:58.820 回答