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

Question

我正在创建一个UL，并尝试使用:n -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个子元素，您的结构在li之后只有一个ul，所以它是唯一被选中的，这就是为什么您的整个表是绿色的。

我把它改成了:

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

现在我们选择li(包含ul)它是#data容器的第n个子元素，然后我们对li中的ul进行样式化，所以我们选择每隔一行然后对它进行样式化。

希望这对你有帮助!

Answer 2

您需要针对li元素而不是ul元素，因此:

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

Answer 3

试试这个:

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>