表行 :nth-child(odd) of [attribute=value]答案

【问题标题】：table row :nth-child(odd) of [attribute=value]表行 :nth-child(odd) of [attribute=value]
【发布时间】：2017-11-10 19:28:06
【问题描述】：

我希望data-tt-parent-id 为 1 的每个奇数 tr 具有不同的背景，是否可以在 CSS 中实现？我找到了可以为li 完成但不适用于tr 的代码

.table tr [data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}
li[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}

<table class="table">
    <tr data-tt-parent-id="1">
        <th>Table<th>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
</table>
<ol>
    <li data-tt-parent-id="1"></li>
    <li data-tt-parent-id="1"></li>
    <li data-tt-parent-id="1"></li>
</ol>

【问题讨论】：

删除tr之后的多余空格。

标签： css sass

【解决方案1】：

只需删除属性选择器之间的间距

.table tr [data-tt-parent-id="1"]:nth-child(odd) {
    背景颜色：蓝色；
}

.table tr[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}
li[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}

<table class="table">
    <tr data-tt-parent-id="1">
        <th>Table<th>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
</table>
<ol>
    <li data-tt-parent-id="1"></li>
    <li data-tt-parent-id="1"></li>
    <li data-tt-parent-id="1"></li>
</ol>

【讨论】：

【解决方案2】：

去掉 tr 之后的空格，你就可以开始了：

.table tr[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}
li[data-tt-parent-id="1"]:nth-child(odd) {
    background-color:blue;
}

<table class="table">
    <tr data-tt-parent-id="1">
        <th>Table<th>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
    <tr data-tt-parent-id="1">
        <td>Attribute 1<td>
    </tr>
</table>
<ol>
    <li data-tt-parent-id="1"></li>
    <li data-tt-parent-id="1"></li>
    <li data-tt-parent-id="1"></li>
</ol>

【讨论】：