html - CSS 选择器分组 : element. 类元素 element.class 元素 - 它选择什么？

Question

我提供了一个包含以下代码的 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

这让我感到困惑，为什么代码一直没有工作......

Answer 1

您的 HTML is 不正确，但 CSS 将正常工作并以 td 为目标.请注意，在您的(原始)示例中，没有表行 <tr> .您会看到它适用于更正后的标记:

<table class="exm_table">
    <tbody>
        <tr class="odd">
            <td>Is this an selected element?</td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/8zan1jyf/

如您所见，您的 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;}