CSS nth-child - 一次获得第 1、2、4 和 5 个孩子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5160008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS nth-child - get 1st, 2nd, 4th and 5th children at once?
提问by Chad
With CSS3 I know I can use the nth-child(an + b)selector. I have a table with 5 rows and I would like to select the 1st, 2nd, 4th and 5th rows with one statement. Is this possible or do I have to use a minimum of two statements like this:
使用 CSS3，我知道我可以使用nth-child(an + b)选择器。我有一个有 5 行的表，我想用一个语句选择第 1、2、4 和 5 行。这是可能的还是我必须至少使用两个这样的语句：
:nth-child(-n+2) /* gets 1 and 2 */
:nth-child(n+4) /* gets 4 and 5 */
I was hoping for a syntax like nth-child(1,2,4,5)or nth-child(1-2,4-5)but it doesn't appear to be part of the spec.
我希望有类似nth-child(1,2,4,5)or的语法，nth-child(1-2,4-5)但它似乎不是规范的一部分。
(I have no control over the page and there are no IDs/classes on these rows.)
（我无法控制页面，并且这些行上没有 ID/类。）
回答by BoltClock
If you want to be explicit, the only way is to repeat :nth-child()like so:
如果你想明确，唯一的方法就是重复:nth-child()这样：
tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)
However, since the table happens to have exactly 5 rows, you can just exclude the third row and you'll get rows #1, #2, #4 and #5:
但是，由于该表恰好有 5 行，您可以只排除第三行，您将得到行 #1、#2、#4 和 #5：
tr:not(:nth-child(3))
回答by Zoheb Akhtar
You can always use even and odd keywords Like:
您始终可以使用偶数和奇数关键字，例如：
table tr:nth-child(even) or if you want the table data use table td:nth-child(odd)
表 tr:nth-child(even) 或者如果你想要表数据使用 table td:nth-child(odd)
回答by Simona Adriani
To make it the more generic possible you can use this:
为了使它更通用，您可以使用它：
tr:not(:nth-child(1n+6)):not(:nth-child(3)) {
/* your rules here */
}
To explain it a little: you are saying you want to select the elements that are notfrom 6 on (so the first 5) and not3rd, if you wrote
稍微解释一下：您是说要选择不是从 6 开始（因此是前 5 个）而不是第 3 个的元素，如果您写了
tr:nth-child(1n+6)
you were targeting the rows from 5 on, since you were selecting the rows
您从 5 开始定位行，因为您正在选择行
(1*0) + 6 [ = 6 ]
(1*0) + 6 [ = 6 ]
(1*1) + 6 [ = 7 ]
(1*1) + 6 [ = 7 ]
(1*2) + 6 [ = 8 ]
(1*2) + 6 [ = 8 ]
...and so on. This is what it means the expression (1n+X), where X in our case is 6.
...等等。这就是表达式 (1n+X) 的含义，其中 X 在我们的例子中是 6。
Adding the :not pseudo selector to the expression above, you are saying you want to select the rows which are notfrom 5 on, so you will select from 5 down, the 1st, 2nd, 3rd, 4th and 5th.
将 :not 伪选择器添加到上面的表达式中，您是说要选择不是从 5 开始的行，因此您将从 5 向下、第 1、第 2、第 3、第 4 和第 5 行中进行选择。
Plus, adding one more :not selector, which targets the 3rd, you will get what you want => The first 5 without the 3rd!
另外，再添加一个 :not 选择器，它针对第三个，你会得到你想要的 => 没有第三个的前 5 个！
/***************** UPDATED! I added a jsfiddle *******************/
/***************** 更新！我添加了一个 jsfiddle *******************/
Here you can see it working in this jsfiddle
在这里你可以看到它在这个jsfiddle 中工作
