Вот так близко, как вы собираетесь получить. Обратите внимание, что вы не можете nth-child считать только отображаемые строки; nth-child примет n -й дочерний элемент, не смотря ни на что, а не nth , который соответствует данному селектору. Если вы хотите, чтобы некоторые строки отсутствовали и не влияли на чередование зебр, вам придется полностью удалить их из таблицы, либо через DOM, либо на стороне сервера.
<!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 in.
#mytable tr[@display=block]:nth-child(odd) {
background-color: #000;
}
Теперь [@display=block] будет соответствовать элементам, для атрибута display которых установлено значение block, например <tr display=block>. Отображение не является допустимым атрибутом HTML; кажется, что вы пытаетесь сделать так, чтобы селектор соответствовал стилю элемента, но вы не можете сделать это в CSS, так как браузер должен применить стили из CSS, прежде чем он сможет это выяснить, что он находится в процессе, когда применяет этот селектор. Таким образом, вы не сможете выбрать, будут ли отображаться строки таблицы. Так как nth-child может принимать только n th потомка, не смотря ни на что, а не n th с некоторым атрибутом, нам придется отказаться от этой части CSS. Существует также nth-of-type, который выбирает n -й дочерний элемент того же типа элемента, но это все, что вы можете сделать.
#mytable tr:nth-child(odd) {
background-color: #000;
}
И вот оно у вас.