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

<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 に答える
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 に答える
0

あなたが探しているのは ':last-child' です

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

この非常に便利なセレクターを示す JSFiddle も作成しました: http://jsfiddle.net/RhKH6/
「N 番目の子」セレクターのその他の便利なレシピは次のとおりです: http://css-tricks.com/useful-nth -子レシピ/

于 2012-09-24T09:20:19.093 に答える