第n个范围的CSS选择器？

aurhwmvo 于 2022-11-19 发布在其他

关注(0)|答案(5)|浏览(187)

如何修改下面的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>

css

来源：https://stackoverflow.com/questions/15639247/css-selector-for-nth-range

5条答案

按热度按时间

7vux5j2d1#

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

.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       */

范例：

第一次

赞(0）回复(0）举报 2022-11-19

uidvcgyl2#

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

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

或者，不使用公式，而仅排除:first-child和:last-child：

.myTableRow td:not(:first-child):not(:last-child){
background-color: #FFFFCC;
}

赞(0）回复(0）举报 2022-11-19

svmlkihl3#

如果要选择元素2到4，请按照以下步骤操作：

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

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

赞(0）回复(0）举报 2022-11-19

0x6upsns4#

我创建了一个非常简单的代码，以便直观地从同一页面上的其他用户的响应中选择列或行。
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;}
        table tr:nth-child(n+2):nth-child(-n+3) td:nth-child(n+2):nth-child(-n+3){background-color:purple;}
    </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>

赞(0）回复(0）举报 2022-11-19

l7mqbcuq5#

试一下：nth-child（偶数）。这应该可以解决问题。因为元素2和4是你的主要目标，而且它们都是偶数。

赞(0）回复(0）举报 2022-11-19