css - 是否可以定位 CSS 中的最后一个列表元素？

Question

我正在生成一个页面菜单，其结构类似于以下嵌套列表:

<ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>
        Page 3
        <ul>
            <li>Subpage 1</li>
            <li>Subpage 2</li> <!-- Can I target ONLY this element? -->
        </ul>
    </li>
</ul>

请注意，此列表是动态的。 元素数量和级别数量不可预测。所以，像这样的东西不够灵活:

/* I know this does not have great browser support - just an example */
ul > li > ul > li:last-child {
    /* CSS here */
}

我意识到我可以修改我的服务器代码来为最后一项添加一个类，但我首先想知道这在 CSS 中是否可行。

为了让事情变得更复杂，我想针对所有主要浏览器以及 IE 7+。

是否可以使用 CSS 定位最后一个列表项？

基本上，我需要这个 Fiddle已解决(通过@Pumbaa80)。

Answer 1

CSS3 之道(IE9+)

如果您确切知道最后一项的深度，您可以重复调用 :last-child:

li:last-child li:last-child {
    color: red;
}

根据 http://caniuse.com/#search=last-child，版本 9 之前的 IE 不支持此伪类选择器.当然，如果你不知道这个列表项有多深，那么这个方法就没什么用了。

JavaScript 之道

您也可以通过 JavaScript 定位最后一个列表项:

var items = document.getElementById("mylist").getElementsByTagName("li"),
    _item = items[ items.length - 1 ];

_item.className == "" 
  ? _item.className = "last" 
  : _item.className += " last" ;

这是原始的 JavaScript，不需要额外的框架或库。如果您使用的是像 jQuery 这样的流行框架，这可能会更简单:

$("#mylist li:last").addClass("last");

我不建议您将 jQuery 只是用于这样的事情。原始 JavaScript 会快得多，而且膨胀少得多。

预处理器方式

根据导航菜单的构建方式，您可以使用服务器端语言来识别最后一个列表项，并将其标记为这样。例如，我们可以使用 PHP 中的 DOMDocument 类执行以下操作:

$d = new DOMDocument();
$d->loadHTML( $html );
    
$a = $d->getElementsByTagName("li");
$l = $a->item( $a->length - 1 );

$c = $l->getAttribute("class");

empty( $c ) 
  ? $l->setAttribute("class", "last") 
  : $l->setAttribute("class", "last $c");

echo $d->saveHTML( $l );

这会找到 HTML 中的最后一个列表项，并向其添加一个新的“last”类。这样做的好处是它不需要复杂的、通常支持不佳的 CSS3 选择器。此外，它不需要添加大型 JavaScript 库来完成琐碎的事情。