是否有可能定位CSS中最后一个列表元素？ [英] Is it possible to target the very last list element in CSS?

问题描述

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

I have a page menu being generated that will be similar in structure to the following nested list:

<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>

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

Note that this list is dynamic. The number of items and number of levels are not predictable. So, something like this wouldn't be flexible enough:

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

我意识到，我可以修改我的服务器代码来添加一个类到最后一个项目，但我想知道如果这是可能的CSS。

I realize that I could modify my server code to add a class to the last item, but I would first like to know if this is possible in CSS.

更复杂，我想定位所有主要浏览器以及IE 7 +。

To make matters more complicated, I would like to target all major browsers along with IE 7+.

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

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

Basically, I need this Fiddle solved (via @Pumbaa80).

推荐答案

CSS3 Way（IE9 +）

如果你知道你的最后一个项目是多么深，你可以重复你的电话：last-child ：

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

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

This pseudo-class selector isn't supported in IE prior to version 9, according to http://caniuse.com/#search=last-child. Of course, if you don't know how deep this list item will be, then this method isn't really helpful.

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

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" ;

这是原始的JavaScript，不需要额外的框架或库。如果你使用一个流行的框架，如jQuery，这可以更简单：

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

我不建议你使用jQuery

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

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

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

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

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.

这篇关于是否有可能定位CSS中最后一个列表元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！