2

警告...ここのCSSツールボックスで最も鋭いツールではありません...

UL を使用してツリー コントロールを作成しようとしていますが、CSS の問題で立ち往生しています。質問を単純化するために、意味をなさないかもしれないものに例を煮詰めましたが、CSS の問題の本質は可能な限り単純です。

次の html を検討してください。

<ul>
    <li><div>should be green :)</div>
        <ul>
            <li><div>should be green :)</div></li>
            <li><div>should be red :)</div></li>
        </ul>
    </li>
    <li><div>should be red :)</div>
        <ul>
            <li><div>should be green !!!!!!!!!!!!</div></li>
            <li><div>should be red :)</div></li>
        </ul>
    </li>
</ul>

そしてこのCSS：

ul li{
    background-color: green;
}

ul li:last-child div{
    background-color: red;
}

言う1つの項目：

<li><div>should be green !!!!!!!!!!!!</div></li>

緑ではなく赤に見える!!!!!

それを含むdivはリストの最後ではないLIに含まれているため、最後の子セレクターではなく通常のセレクターを使用することを期待していました

快楽を求めるあなたの評判ポイントのフィドルです！

http://jsfiddle.net/dmd1214/5Vm58/16/

4

3 に答える 3

3

の最後の要素（div）を選択するには、子セレクターを使用する必要がありますli。

ul li:last-child > div{
    background-color: red;
}

JSフィドル

于 2013-05-02T00:50:04.560 に答える
3

子孫セレクターを子セレクターにします。

ul li:last-child > div {
    background-color: red;
}

<div>そうすれば、最後の要素の子である要素のみに一致し<li>ます。

デモ: http://jsfiddle.net/5Vm58/20/

于 2013-05-02T00:50:44.360 に答える
0

divそれは、:last-child使用法でをターゲットにしているためです。

ul  li {
    background-color: green;
}

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

フィドル: http://jsfiddle.net/5Vm58/19/

于 2013-05-02T00:51:44.103 に答える