我提供了一个包含以下代码的 CSS
table.exm_table tbody tr.odd td{
background-color:#ffffff;
}
我不确定它应该是什么风格。以下结构中的 td 元素会设置背景颜色吗?
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
编辑:
实际上我忽略了 CSS 的第二部分:
table.exm_table tbody tr:nth-child(odd) td,
table.exm_table tbody tr.odd td
这让我感到困惑,为什么代码一直没有工作......
最佳答案
您的 HTML is 不正确,但 CSS 将正常工作并以 td
为目标.请注意,在您的(原始)示例中,没有表行 <tr>
.您会看到它适用于更正后的标记:
<table class="exm_table">
<tbody>
<tr class="odd">
<td>Is this an selected element?</td>
</tr>
</tbody>
</table>
如您所见,您的 CSS 选择器确实处理了 td
- 或更具体地说:
任何 td
在 tr
(具有类名 'odd'
)在 tbody
中在 table
(具有类名 'exm_table'
)
可能不需要那么具体;)
更新
既然你已经编辑了你的问题,这里有一些关于交替行样式的更多信息,这些信息似乎让你感到困惑。
table.exm_table tbody tr:nth-child(odd) td
使用 nth-child选择器在交替行中获取 tds。
table.exm_table tbody tr.odd td
只需选择 trs 中具有类名“奇数”的所有 tds。 (这个类名可能会造成混淆,因为它本身与奇数/偶数无关,并且可以很容易地称为“bob”)
这里有一个演示可以帮助阐明:http://jsfiddle.net/8zan1jyf/8/
/* to style ALL tds */
table.exm_table tbody tr td {background-color:pink;}
/* to style EVERY-OTHER td */
table.exm_table tbody tr:nth-child(odd) td {background-color:red;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'odd' (nothing to do with actual odd/even ordering) */
table.exm_table tbody tr.odd td {background-color:blue;}
/* to style td WHERE THE PARENT TR HAS THE CLASSNAME 'bob' */
table.exm_table tbody tr.bob td {background-color:green;}
关于html - CSS 选择器分组 : element. 类元素 element.class 元素 - 它选择什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25784829/