第 n 个范围的 CSS 选择器？
CSS Selector for nth range?
如何调整下面的 CSS 选择器：
.myTableRow td:nth-child(?){ background-color: #FFFFCC; } |
所以它适用于
<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> |
您可以使用的另一种方法是：
.myTableRow td:nth-child(n+2):nth-child(-n+4){ background-color: #FFFFCC; } |
这更清楚一点，因为它包含了范围内的数字(
它也更健壮一些，因为您不必考虑项目的总数。
澄清：
: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; } |
相关讨论
- 这个解决方案更干净，更不容易出错，更适合目的。该示例有助于可视化解决方案。这应该是公认的答案。
- 我知道问题不包括那个，但是如果有更多的孩子并且我们也想选择接下来的 4 个呢？像一个循环
- @Salatiel如果您想选择更多项目，只需增加第二个数字。我不确定你所说的"像一个循环"是什么意思。
- @JLRishe 例如，如果您有未知数量的项目，有没有办法将样式应用于每 3 个项目？像 111 000 111 000 111 ...(无限期)
-
@Salatiel我想不出用一个选择器来做到这一点，但你可以用三个选择器来做到这一点：
:nth-child(6n + 1), :nth-child(6n + 2), :nth-child(6n + 3) 。示例：codesandbox.io/s/epic-water-ddp3e?file=/src/styles.css - 效果很好 1. 不幸的是，似乎不可能将其设为重复模式，例如，在日历中重复 2 天的周末列。
你不能用一个
.myTableRow td:nth-child(n+2):nth-last-child(n+2){ background-color: #FFFFCC; } |
或者，不使用公式，只需排除
.myTableRow td:not(:first-child):not(:last-child){ background-color: #FFFFCC; } |
相关讨论
- 太好了，这回答了我的问题。我只是想知道这是否可以通过单个选择器来实现。但是链接它是。
- @BoltClock：你能解释一下链接 nth-child 是如何工作的吗？我知道输出，但无法理解处理方式。
如果你想选择元素 2 到 4，你可以这样做：
td:nth-child(-n+4):nth-child(n+2) { background: #FFFFCC; } |
提醒选择器链的顺序应该是从大到小。 Safari 存在一个错误，导致该技术无法正常工作。
我创建了一个非常简单的代码，以便直观地清楚如何从同一页面上的其他用户的响应中选择列或行。
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> |