CSS 选择器分组:元素.class元素元素.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不正确，但否则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 - 或者更具体地说：

tr(类名为 'odd'(内tbody内table(类名为 'exm_table'(内的任何td

可能没有必要那么具体;)

更新

由于您已经编辑了问题，这里有一些关于交替行样式的更多信息，这似乎让您感到困惑。

table.exm_table tbody tr:nth-child(odd) td使用第 n 个子选择器在交替行中获取 TDS。

table.exm_table tbody tr.odd td只是选择 TRS 中类名为"odd"的所有 TD。(正是这个类名可能会令人困惑，因为它本身与奇数/偶数无关，可以很容易地被称为"鲍勃"(

下面是一个有助于澄清的演示： 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;}

Answer 2

初始 CSS 目标td并将背景设置为白色 (#fff(

---

您可以直接定位类

.exm_table {
    background-color:#ffffff;
}
.odd {
    background-color:#eeeeee;
}