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 - 或更具体地说：

任何 td 一个tr（其中包含类名'odd'） a tbody 一个table（具有类名'exm_table'）

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

<强>更新

由于您已在此处编辑了您的问题，因此有关交替行样式的更多信息似乎让您感到困惑。

table.exm_table tbody tr:nth-child(odd) td使用nth-child选择器在备用行中获取tds。

table.exm_table tbody tr.odd td只选择trs中所有类别为“odd”的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;}

Answer 2

您的初始css定位td并将背景设置为白色（#fff）

你可以直接定位课程

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

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

2 个答案: