1

クラスの基本で最後の子を見つけようとしていて、スタイリングを適用したいのですが、 :last-child セレクターを使用すると、期待どおりではありません。Javaスクリプトを使用したくないという制限があり、要素の長さが固定されていないため、n番目のセレクターを使用できません。

使用された HTML マークアップ

<ul>
    <li class="a">First</li>
    <li class="a">Second</li>
    <li class="a">Third</li>    
    <li class="b">First</li>
    <li class="b">Second</li>
    <li class="b">Third</li>    
    <li class="c">First</li>
    <li class="c">Second</li>
    <li class="c">Third</li>        
</ul>

使用されたCSS

.a{
    color:red;
}
.b{
    color:blue;
}
.c{
    color:green;
}

.a:last-child{
    color:green;
}
.b:last-child{
    color:red;
}
.c:last-child{
    color:blue;
}

この問題にアプローチする方法についてのヘルプ。

4

4 に答える 4

3

ul 要素の最後の子をターゲットにしようとしている場合は、これで十分です

ul li:last-child {

}

デモ

last-childまたは、ここで機能しないよりも必要な各一意のクラスの最後の子をスタイルしたい場合は、nth-of-type代わりに使用するか、次のような式を使用する必要があります

デモ

ul li:nth-child(3n+3) { /* This way you don't have to use classes too */
    color: red;
}

注: 現在より動的に要素を生成している場合、一意のクラスを持つ要素の最後の子を選択する方法はありません。SO nth-child、nth-of-typeまたは私が言及したような式を使用する必要があります

これを行う他の方法は、反復後にループ内でプログラムでul要素を作成し、このセレクターを使用することですn

于 2013-05-15T11:15:56.923 に答える
1

最後の要素を指定するクラスを追加するか、JS を使用する方が簡単だとします。

たとえば、次のようなことができます。

<ul>
    <li class="a ">First</li>
    <li class="a ">Second</li>
    <li class="a last">Third</li>    
    <li class="b">First</li>
    <li class="b">Second</li>
    <li class="b last">Third</li>    
    <li class="c">First</li>
    <li class="c">Second</li>
    <li class="c last">Third</li>        
</ul>

そしてCSS：

.a{
    color:red;
}
.b{
    color:blue;
}
.c{
    color:green;
}

.a.last{
    color:green;
}

.b.last{
    color:red;
}

.c.last{
    color:blue;
}

http://jsfiddle.net/ud8KZ/1/

于 2013-05-15T11:41:51.583 に答える
1

まず第一に、クラス名の前にポイントがありませんが、とにかくこれでは問題は解決しません。リストをプログラムで生成しているように見えるので、特定のクラスを持つ最後の各項目にクラスを追加することをお勧めします。または、Javascript を使用しますが、これは望ましくありません...

于 2013-05-15T11:20:26.293 に答える
0

最後の 3 つの CSS クラスでドットを使用していません

.a:last-child{
    color:green;
}
.b:last-child{
    color:red;
}
.c:last-child{
    color:blue;
}

それが出力が得られない理由だと思います

于 2013-05-15T11:19:21.703 に答える