Question

我有一个<ul> <li>结构，我想做的就是

.div ul:last-child li:last-child {border-bottom:1px etc}，

所以它会选择上一个<li>中的最后一个<ul>。

<div id="accord_wrapper">
        <div class="accordionButton"></div>
            <div class="accordionContent">
                <ul>
                    <li><a href="http://www.google.com">one</a></li>
                    <li><a href="http://www.yahoo.com">two</a></li>
                </ul>
        </div>          
        <div class="accordionButton">Button 2 Content</div>
        <div class="accordionContent"><ul>
                    <li><a href="http://www.google.com">one</a></li>
                    <li><a href="http://www.yahoo.com">two</a></li>
                </ul></div>
        <div class="accordionButton">Button 3 Content</div>
        <div class="accordionContent"><ul>
                    <li><a href="http://www.google.com">one</a></li>
                    <li><a href="http://www.yahh.com">two</a></li>
                </ul></div>
        <div class="accordionButton">Button 4 Content</div>
        <div class="accordionContent"><ul>
                    <li><a href="http://www.google.com">one</a></li>
                    <li><a href="http://www.stackoverflow.com">two</a></li>
                </ul></div>
    </div>

Answer 1

:last-child伪选择器来自CSS3，因此您的浏览器需要兼容才能使用它。见http://caniuse.com/#search=%3Alast-child

顺便说一句，.div ul:last-child li:last-child {border-bottom:1px etc}按照您的说法运作。

Answer 2

在您的实际代码中，每个ul是其父div.accordionContent的最后一个也是唯一的子代。这就是选择器匹配每个ul的原因。

由于上一个div.accordionContent碰巧也是您的顶级元素的最后一个孩子，所以您应该能够这样做：

#accord_wrapper .accordionContent:last-child ul li:last-child

Answer 3

您可以使用:nth-child(number)

选择ul中的任何li

这是一个例子

HTML：

<ul>

     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
     <li>five</li>

</ul>

让我们说我们想选择ul里面的第三个孩子，然后我们会用nth-child（3）

的CSS：

ul:last-child li:nth-child(3) {
    /*style something*/
}

html / css为ul / li选择last-child的last-child

3 个答案: