表行：[attribute = value]的第n个子（奇数）

Question

我希望data-tt-parent-id为1的每个奇数li具有不同的背景，是否可以在CSS中执行？我找到了可以为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; }

的代码

＆＃13;

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需移除属性选择器

之间的间距即可

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

.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>

Answer 2

摆脱tr之后的空间，你很高兴：

<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>

a.testclass {
  display: none;
}

a.testclass:after {
  content: 'new text';
}