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

我有以下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>

一,
二,
三,
四,
五,


一,
二,
三,
四,
五,


一,
二,
三,
4
5

我已经动态生成了HTML，我如何设计上述两件事？使用

id=“top”

将样式应用于

部分

，并在最后一个

ul

中设置最后2个

列表项的样式

如何：

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

像这样的事

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

使用选择器和的组合

---

注-这是IE8及以下版本提供的。

需要注意的是，这些版本使用css3选择器，而这些选择器在IE9以下版本中不可用。

#top {
    color:red;
}

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