1

我有一个<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>
4

3 回答 3

4

在您的实际代码中，每个ul都是其 parent 的最后一个也是唯一的孩子div.accordionContent。这就是为什么每一个ul都被你的选择器匹配的原因。

由于最后一个div.accordionContent恰好也是顶级元素的最后一个子元素，因此您应该可以这样做：

#accord_wrapper .accordionContent:last-child ul li:last-child
于 2013-04-02T18:20:14.920 回答
3

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

顺便说一句，.div ul:last-child li:last-child {border-bottom:1px etc}正如你所描述的那样工作。

于 2013-04-02T18:07:53.253 回答
0

您可以通过使用选择 ul 中的任何 li:nth-child(number)

这是一个例子

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*/
}
于 2015-01-14T13:56:47.153 回答