Question

我正在创建一个UL并尝试使用：nth-child（2n + 1）将背景颜色应用于其他每一行每行基本上是主UL的子项，但我已经能够为每个UL应用一种样式（可能嵌套的UL中的子项是干扰的）。我几乎尝试了所有可以想象的组合，我错过了什么？诺伊哈达尔

<style>
#data {
    width: 100%;
    list-style: none;
}
#data li ul {
    list-style: none;
    float: left;
    width: 100%;
    background: #FFC;
}
#data li ul:nth-child(2n+1) {
    background: #3F6;
    font-weight: bold;
}
#data li ul li {
    display: block;
    float: left;
    width: 10%;
    line-height: 24px;
}
</style>


<ul id="data">
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Closed Date</li>
                <li>Price</li>
                <li>DOM</li>
                <li>Address</li>
                <li>Price Change</li>
            </ul>
        </li>
</ul>

Answer 1

您需要定位li元素而不是ul所以：

#data li ul li:nth-child(2n+1) {
    background: #3F6;
    font-weight: bold;
}

Answer 2

试试这个：

table.stripedTable {
background-color: #222;
    color: #fff;
}
    .stripedTable tr:nth-child(2n) {
        background-color: #EEE;
        color: #222;
    }

HTML：

<table id="table" class="stripedTable">
        <tr id="Row 1">     
                    <td>Row 1</td>
            <td id="Cell 1">Hi
            </td>
        </tr>
        <tr id="Row 2">
                <td>Row 2</td>
                <td id="Cell 2">Cell 2</td>
            </tr>
            <tr id="Row 3">
                <td>Row 3</td>
                <td id="Cell 3">Cell 3</td>
            </tr>
            <tr id="Row 4">
                <td>Row 4</td>
                <td id="Cell 4">Cell 4</td>
            </tr>
</table>

Answer 3

我看到了问题，这是一个jsFiddle修复它。我会解释一下。

#data li ul:nth-child(2n+1) {
    background: #3F6;
    font-weight: bold;
}

这样做是选择ul元素作为li的第n个子元素，您的结构只有ul之后的li所以它是只选择了一个，这就是整个表格为绿色的原因。

这是我改变它的原因：

#data li:nth-child(2n+1) ul {
    background: #3F6;
    font-weight: bold;
}

现在我们选择li（包含ul），它是#data容器的第n个子项，然后我们为{{1}设置样式那是在ul中，所以我们选择每一行，然后设置样式。

希望这有帮助！

如何使用：nth-child将背景应用于无序列表？

3 个答案:

如何使用：nth-​​child将背景应用于无序列表？

3 个答案:

如何使用：nth-child将背景应用于无序列表？