Zebra 使用 CSS3 对带有隐藏行的表进行条带化处理?
我有一张桌子
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
我正在尝试将表格条带化设置为使用第 n 个子选择器，但似乎无法破解它.
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #FFF;
}
我很确定我已经接近了......似乎无法破解它.
I'm pretty sure I'm close ... can't quite seem to crack it.
有人提供线索吗?
推荐答案
这是你将要得到的最接近的.请注意，您不能让 nth-child 只计算显示的行数；nth-child 无论如何都会采用第 n 个子元素，而不是匹配给定选择器的 nth 子元素.如果您希望丢失某些行而不影响斑马条纹，则必须通过 DOM 或服务器端将它们从表中完全删除.
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
<!DOCTYPE html>
<style>
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
</style>
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
以下是我所做的修复:
table #mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
无需为基于 id 的选择器指定祖先选择器；只有一个元素会匹配 #table，所以你只是通过添加 table 来添加额外的代码.
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
现在， Now, 你有它. 相关文章[@display=block] 将匹配属性 display 设置为 block 的元素，例如 .Display 不是有效的 HTML 属性；你似乎想要做的是让选择器匹配元素的样式，但你不能在 CSS 中做到这一点，因为浏览器需要应用 CSS 中的样式才能弄清楚，这它在应用此选择器时正在执行中.因此，您将无法选择是否显示表格行.由于 nth-child 无论如何只能取第 nth 个孩子，而不是带有某些属性的第 nth 个孩子，我们将不得不放弃这部分CSS.还有nth-of-type，它选择相同元素类型的第n个子元素，但你只能这样做.
[@display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do. #mytable tr:nth-child(odd) {
background-color: #000;
}