第 n 个范围的 CSS 选择器?

新手上路,请多包涵

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

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

所以它适用于 td2 ~ 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>

原文由 QFDev 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 810
2 个回答

您将无法使用单个 :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;
}

原文由 BoltClock 发布,翻译遵循 CC BY-SA 3.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>

原文由 Luis Lobo 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题