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 Way（IE9 +）

如果您确切知道上一个项目的确切深度，可以重复拨打:last-child：

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

根据http://caniuse.com/#search=last-child，在版本9之前的IE中不支持此伪类选择器。当然，如果您不知道此列表项的深度，那么此方法实际上并没有用。

JavaScript Way

您也可以通过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库来做琐碎的事情。

Answer 2

你发布了正确的方法：

li:last-child

如果您需要确定可以使用javascript / jQuery来执行此操作。但是你可能会遇到这样的问题：“如果有人禁用了js？”......没办法。

使用li:last-child。

编辑：

如果你能在UL添加至少一堂课，那将很容易。否则，如果您确定只有两个列表：

ul ul li:last-child { /* code */ }

另一个编辑：

http://jsfiddle.net/toroncino/4NXg2/

Double solution，js和css。

再次编辑：

你的小提琴：http://jsfiddle.net/toroncino/NaJas/1/

$('ul').last().addClass('last');

Answer 3

简而言之：不。由于IE7中对“高级css”的支持很差（非常），所以你给出的限制使CSS解决方案变得不切实际。

在您的情况下，使用javascript会是一个选项吗？使用jquery可以想到以下内容：

$('ul li').last().css('color', 'red');

编辑：这也会绕过你的“未知树深度”问题，因为最后一个li的子节点会在匹配项列表中自动进一步向下，但早期li项的子节点不会：

第一个元素
第二元素
第3个元素
- 第4个元素
第五元素

编辑：我在这里更新了你的小提琴http://jsfiddle.net/NaJas/4/

Answer 4

这是不可能的。你的约束

项目数量和级别数量无法预测。

意味着CSS2选择器，甚至CSS3选择器都不够用：

假设您有一个适用于列表深度2的选择器。现在在该项中添加第三个列表级别必须使该选择器无效，即选择器必须依赖于元素的子元素。这样的选择器还不存在will be introduced in CSS4，这可以解决您的问题：

/* CSS4 */
li:last-child:not($li li) {
    /**/
}

选择器$li li表示“li有一些li后代”。

Answer 5

您可以在CSS中使用li：last-child

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

5 个答案:

CSS3 Way（IE9 +）

JavaScript Way

预处理器方式