5

如何<li>在视图生成的列表中的最后一个上添加“最后一个”类？

4

4 回答 4

9

您可以在 li 元素上使用last-child伪类来实现这一点

<html>
<head>
<style type="text/css">
ul li:last-child
{
font-weight:bold
}
</style>
</head>
<body>
<ul>
<li>IE</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
</body>
</html>

还有一个可用的 first-child 伪类。

我不确定最后一个子元素在 IE 中是否有效。

于 2008-09-22T08:06:28.420 回答
2

或者，如果某些浏览器不支持 last-child 类，您可以通过 JavaScript 实现此目的。例如，此脚本为所有“ul”标签中的最后一个“li”元素设置类名，尽管它可以很容易地适应其他标签或特定元素。

function highlightLastLI()
{
    var liList, ulTag, liTag;
    var ulList = document.getElementsByTagName("ul");
    for (var i = 0; i < ulList.length; i++)
    {
        ulTag = ulList[i];
        liList = ulTag.getElementsByTagName("li");
        liTag = liList[liList.length - 1];
        liTag.className = "lastchild";
    }
}
于 2008-09-22T08:24:18.033 回答
0

jquery 是否与 drupal 捆绑在一起，如果是这样，您可以使用

$('ul>li:last').addClass('last');

为达到这个

于 2008-09-22T08:13:45.627 回答
0

您可以使用该 pesudo-class last-child，first-child用于第一个或nth-child用于任意数量的孩子

li:last-child{
    color:red;
    font-weight:bold;
}
于 2015-09-01T09:59:13.110 回答