0

我有以下 HTML：

<section></section>

<section id="top">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>   <!-- STYLE THIS -->
        <li>5</li>   <!-- STYLE THIS -->
    </ul>
</section>

<section></section>

我已经动态生成了 HTML，如何设置上述两件事的样式？将样式应用于sectionwith id="top"，并在 last 中设置最后 2 个list-items样式ul。

4

3 回答 3

8

像这样的东西？

#top > ul:last-of-type li:nth-last-child(-n+2) {
    background:aqua;
}

jsFiddle在这里

使用选择器 -:last-of-type和的组合:nth-last-child。

注意 - IE8 及以下版本不完全支持此功能。

于 2013-09-23T17:11:26.590 回答
2

关于什么：

#top > ul:nth-child(3) > li:nth-child(4),
#top > ul:nth-child(3) > li:nth-child(5) {}

工作演示

于 2013-09-23T17:11:23.700 回答
1 
#top {
    color:red;
}

#top ul:last-of-type li:last-of-type {
    color:green;
}
于 2013-09-23T17:14:58.837 回答