1

我在我的网站上使用以下代码：

<div id="sidebar">
    <h1>Headline</h1>
    <ul class="nav">
        <a href=""><li>News</li></a>
        <a href=""><li>Unternehmen</li></a>
        <a href=""><li>Shop</li></a>
        <a href="" target="_blank"><li>Werbung</li></a>
    </ul>
    <h1>Mediathek</h1>
    <ul class="nav">
        <a href=""><li>one</li></a>
        <a href=""><li>two</li></a>
        <a href=""><li>three</li></a>
    </ul>
    <h1>Jobs</h1>
    <ul class="nav">
        <a href=""><li>Außendienstmitarbeiter</li></a>
        <a href=""><li>Ausbildung</li></a>
        <a href=""><li>Studentenpraktikum</li></a>
    </ul>
</div>

现在我正在尝试选择 ul.nav 列表中的每个最后一个 li 元素。多次尝试后将无法正常工作。我希望有人能帮忙！

4

4 回答 4

2

那可能是因为你把li.a

使用此构造，您需要

ul.nav a:last-child li

但是你应该把a里面的li然后做

ul.nav li:last-child

在 HTML4 和 HTML5 中，一个li元素不能是任何类型的元素：

于 2012-09-24T09:17:07.350 回答
1

尝试交换<li>和<a>. 代码应该是：

 <ul class="nav">
    <li><a href="">News</a></li>
    <li><a href="">Unternehmen</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" target="_blank">Werbung</a></li>
</ul>

比我认为ul.nav li:last-child会奏效。

于 2012-09-24T09:19:30.827 回答
1

首先，您需要将锚点<a>放在列表项<li>元素中。

<div id="sidebar">
    <h1>Headline</h1>
    <ul class="nav">
        <li><a href="">News</a></li>
        <li><a href="">Unternehmen</a></li>
        <li><a href="">Shop</a></li>
        <li><a href="" target="_blank">Werbung</a></li>
    </ul>
    <h1>Mediathek</h1>
    <ul class="nav">
        <li><a href="">one</a></li>
        <li><a href="">two</a></li>
        <li><a href="">three</a></li>
    </ul>
    <h1>Jobs</h1>
    <ul class="nav">
        <li><a href="">Außendienstmitarbeiter</a></li>
        <li><a href="">Ausbildung</a></li>
        <li><a href="">Studentenpraktikum</a></li>
    </ul>
</div>​

然后你可以使用选择器：

ul.nav li:last-child a
{
    color: #f00;
}​

这将完美地工作。

http://jsfiddle.net/Kyle_Sevenoaks/SLB4f/

于 2012-09-24T09:22:31.080 回答
0

你正在寻找的是'：last-child'

ul.nav a:last-child{
    // code here
}

我还创建了一个显示这个非常有用的选择器的 JSFiddle：http: //jsfiddle.net/RhKH6/
以下是“N-th Child”选择器的其他有用配方：http: //css-tricks.com/useful-nth -儿童食谱/

于 2012-09-24T09:20:19.093 回答