html - 如何使用 :nth-child? 将背景应用于无序列表

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

我看到了问题，这里是 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 个子级，并且然后我们为 li 中的 ul 设置样式，因此我们选择每隔一行然后设置样式。

希望这对您有所帮助!