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 定位最后一个列表项？

基本上，我需要解决这个小提琴（通过@Pumbaa80）。

Answer 1

CSS3 方式 (IE9+)

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

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

根据http://caniuse.com/#search=last-child，在 9 版之前的 IE 中不支持这种伪类选择器。当然，如果你不知道这个列表项有多深，那么这种方法并没有真正的帮助。

The JavaScript Way

You can target the very last list item via JavaScript as well:

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

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

This is raw JavaScript, which requires no additional frameworks or libraries. If you're using a popular framework like jQuery, this could be even simpler:

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

I wouldn't suggest you use jQuery just for something like this. Raw JavaScript would be far faster, and far less bloat.

The Preprocessor way

Depending on how your navigational menu is constructed, you may be able to use a server-side language to identify the last list-item, and mark it as such. For example, we could perform the following using the DOMDocument class in PHP:

$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 );

This finds the last list item in the HTML and adds a new class of "last" to it. The benefit to this is that it doesn't require complicated, and often times poorly-supported, CSS3 selectors. Further, it doesn't require the addition of large JavaScript libraries to do trivial things.

Answer 2

您发布了正确的方法：

li:last-child

如果你需要确定你可以使用 javascript / jQuery 来做到这一点。但是你可能会遇到问题：“如果人们禁用了js？”......没办法。

使用li:last-child.

---

编辑：

如果你能添加至少一个类UL就很容易了。否则，如果您确定只有两个列表：

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

---

另一个编辑：

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

双重解决方案，js和css。

---

再次编辑：

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

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

Answer 3

In short : no. The constraints you're giving make CSS solutions impractical due to the (very) poor support for 'advanced css' in IE7.

Would the use of javascript be an option in your case? With jquery the following comes to mind:

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

edit: This will also bypass your 'unknown tree depth' issue as child nodes of the last li would automatically be further down in the list of matching items but child nodes of earlier li items would not :

• 1st element
• 2nd element
• 3rd element
  • 4th element
• 5th element

edit: i've updated your fiddle here http://jsfiddle.net/NaJas/4/

Answer 4

It is not possible. Your constraint

The number of items and number of levels are not predictable.

means that CSS2 selectors, and even CSS3 selectors are not sufficient:

Suppose you have a selector that works for list depth 2. Now adding a third list level in that item would have to invalidate that selector, i.e. the selector would have to depend on the element's child elements. Selectors like that don't exist yet and will be introduced in CSS4, where this would be a solution to your problem:

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

The selector $li li means "an li that has some li descendant".

Answer 5

You can use li:last-child in your CSS