javascript - 最后一个 child 的最后一个 child 的风格

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，我该如何设计上面两件事的样式？将样式应用于 section与 id="top" ，并为最后 2 个设置样式 list-items在最后ul .

Answer 1

是这样的吗？

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

jsFiddle here

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

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