问题描述
我有一张桌子
<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; }
现在,[@display=block] 将匹配属性 display 设置为 block 的元素,例如
Now, [@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; }
你有它.
- 0
- 0
- 0
- 0
- 0