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>

利用可能な最初の子の疑似クラスもあります。

ただし、last-child 要素が IE で機能するかどうかはわかりません。

于 2008-09-22T08:06:28.420 に答える
2

または、特定のブラウザーが最後の子クラスをサポートしていない場合は、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

その疑似クラスの last-child、最初の子には最初の子、任意の数の子にはnth-childを使用できます

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