样式最后一个孩子的最后一个孩子

Question

我有以下 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，我该如何设置上面两个东西的样式？使用id="top" 将样式应用于section，并在最后一个ul 中设置最后2 个list-items 的样式。

Answer 1

这样的？

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

jsFiddle here

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

注意 - 这是 IE8 及以下版本的 not fully supported。

Answer 2

怎么样：

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

Working demo

Answer 3

#top {
    color:red;
}

#top ul:last-of-type li:last-of-type {
    color:green;
}