CSS 每两个表格行的第 n 个孩子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12375293/
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
nth-child for every two table rows
提问by brianrhea
I need to make every two rows of my table grey and I would prefer to use nth-child if possible.
我需要将表格的每两行变成灰色，如果可能的话，我更愿意使用 nth-child。
I've messed around with Chris Coyier's nth-child testerbut still can't get it.
我弄乱了Chris Coyier 的 nth-child 测试员，但仍然无法得到它。
I need the following formula:
我需要以下公式：
1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey
and so on. I'd prefer not to put a class in the html as I'm sure that's going to be a suggestion from some. If there is a way to pull this off with nth-child, that's what I'm looking for.
等等。我不想在 html 中添加一个类，因为我相信这会是一些人的建议。如果有办法用 nth-child 解决这个问题，那就是我正在寻找的。
回答by Eric
Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.
意识到你正在做 4 组，然后你可以看到你可以让每 4 个元素和每 4 个元素减 1 是白色，然后每 4 个元素减 2，或每 4 个元素减 3 是灰色。
So, you'd use 4nand 4n-1, then 4n-2and 4n-3:
所以，你会使用4nand 4n-1， then 4n-2and 4n-3：
div:nth-child(4n), div:nth-child(4n-1) {
background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
background: blue;
}
That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.
该代码并不适合您的情况，我是为jsFiddle 概念验证编写的。
NB disclaimer: Keep in mind that nth-childdoes not work in IE8. Typical issue, of course.
NB 免责声明：请记住，nth-child在 IE8 中不起作用。当然是典型的问题。
回答by bob
Here's what I'm using to right-align the first column of each table.
这是我用来右对齐每个表的第一列的内容。
table td:nth-child(2n-1) {
align: right;
text-align: right;
}
回答by jbyrd
@Eric's answer is exactly right - but if you want to easily extend this to groups of 3, 4, 5, etc, and you're using Sass, here's the code (if you want more groups, just increase $largestGroupSize):
@Eric 的回答完全正确 - 但如果你想轻松地将其扩展到 3、4、5 等组，并且你正在使用 Sass，这里是代码（如果你想要更多组，只需增加$largestGroupSize）：
.table-with-grouped-rows {
// generate styles for .groups-of-2, .groups-of-3, etc.
$largestGroupSize: 6;
@for $groupNumPerColor from 2 through $largestGroupSize{
$totalGroupNum: $groupNumPerColor * 2;
&.groups-of-#{$groupNumPerColor} {
$start: $totalGroupNum - 1;
$end: $groupNumPerColor;
@for $primaryBgIndex from $start through $end {
$nthString: #{$totalGroupNum}n - #{$primaryBgIndex};
> tbody > tr:nth-of-type(#{$nthString}) > td {
background-color: $white;
}
}
$start: $groupNumPerColor - 1;
$end: 0;
@for $alternateBgIndex from $start through $end {
$nthString: #{$totalGroupNum}n - #{$alternateBgIndex};
> tbody > tr:nth-of-type(#{$nthString}) > td {
background-color: $light-gray;
}
}
}
}
}
And then in your markup, on the <table>element, you'd simply add the classes table-with-grouped-rowsand groups-of-{n}. For example, if you want a table with groups of 3, you'd write:
然后在您的标记中，在<table>元素上，您只需添加类table-with-grouped-rows和groups-of-{n}. 例如，如果您想要一个包含 3 组的表格，您可以这样写：
<table class="table-with-grouped-rows groups-of-3">
Boom.
繁荣。
