1

class=title特定の使用を選択したい次のコードがありますnth-childが、うまくいくようです

<div class="block">
   <div class="title"></div> <!-- first title here !-->
   <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
   <div class="title"></div> <!-- second title here !-->
   <div class="item"></div>
   <div class="title"></div> <!-- third title here !-->
   <div class="item"></div> 
   <div class="item"></div>
   <div class="item"></div>
</div>

テスト 1 

.title:nth-child(3){
   background-color: red;
 }

期待される結果Third title highlightedですが、実際の出力はno highlight is done

テスト 2

.title:nth-child(1){
   background-color: red;
 }

期待される結果First title highlighted実際の出力はfirst title is highlighted

最初の子のみで動作するのに、他の子では動作しない理由がわかりません..

4

11 に答える 11

3

クラス名を持つの3番目の子を実際に選択する場合は、子のインデックス位置を知っている必要があります。この場合、3つではなく7つです。したがって、次のようなことを行う必要があります。div.block.title

 .title:nth-child(7){
     background-color: red;
 }

ワーキングフィドル

titleつまり、の位置3にクラスを持つ子はありませんdiv.block。

更新：

CSSを使用して、指定された位置に子要素が存在するかどうかを知らずに子要素を選択することはできません。ただし、を使用することは可能jQueryです。

$('.title:eq(2)')  //This will search for the third child with the class .title
于 2013-03-05T06:42:57.083 に答える
1

子が何であるかに関係なく、:nth-child(n),すべての子がカウントされ、指定された要素は、疑似クラスにアタッチされたセレクターと一致する場合にのみ選択されます。

疑似クラスに:eq(n)アタッチされたセレクターのみがカウントされ、他の要素の子に限定されず、(n+1)3番目（nは0ベース）が選択されます。

だから$('.block .title:eq(2)').css('background-color','Red');動作します。

于 2013-03-05T06:43:23.023 に答える
1

セレクター.title:nth-child(3)は、「属性を持つ要素の3番目」を意味するのではなく、属性をtitle持つ要素と一致し、titleその親の3番目の子です。

CSSには「そのクラスのn番目」のセレクターはありません。JavaScriptの回避策の使用を検討してください。しかし、のようなクラス名の使用はtitle、要素が実際にはあるレベルの見出しとしてマークアップされる必要があることを示唆しています。たとえば、のh2代わりにdiv。そうすることで、クラス属性を削除して、のようなセレクターを使用できますh2:nth-of-type(3)。

于 2013-03-05T06:43:26.313 に答える
1

テスト1は、次のような構造がある場合にのみ機能します。

<div class="title"></div>
<div class="title"></div>
<div class="title"></div>

.title:nth-child(3){
  background-color: red;
}
于 2013-03-05T06:46:38.497 に答える
1

これを使って$('.title').siblings(':eq(3)').css('background-color', 'red');

デモ: http://jsfiddle.net/8JC7F/

またはさらに良い

$('.title').siblings('.title:eq(0)').css('background-color', 'red');

また、セレクターが機能しない理由を知りたい場合は、w3school から引用します

:nth-child(n) セレクターは、型に関係なく、親の n 番目の子であるすべての要素に一致します。

n には、数値、キーワード、または式を指定できます。

だからあなたの場合

.title:nth-child(5){
    background-color: red;
}

これは完全に機能します

于 2013-03-05T07:01:11.517 に答える
1

class="title" で最初の div を強調表示するには:

    $('div.title:eq(0)').css('background-color','red');

class="title" で 2 番目の div を強調表示するには:

    $('div.title:eq(1)').css('background-color','red');

class="title" で 3 番目の div を強調表示するには:

    $('div.title:eq(2)').css('background-color','red');
于 2013-03-05T07:03:32.393 に答える
0

.title:nth-child(3)を意味しelement with class 'title' which is the third child of it's parentます。そうではありませんwhich is the third element with that class。

the third element with that class実際、純粋な CSSでは選択できません。

jQuery次のセレクターでスクリプトを使用できます。

$('.title:eq(2)')
于 2013-03-05T06:40:56.780 に答える
0

.eq()jQuery メソッドを使用できます。

$('.block div.title:eq(0)').css('background-color','red');
于 2013-03-05T06:36:32.560 に答える
0

:eq(index)これにはセレクターを使用できます

$('.block .title:eq(2)').css('background-color','Red');

デモ

于 2013-03-05T06:39:50.780 に答える
-1

使用する

.title:first-of-type{
    color:#478547;

}

と

:nth-of-type()

タイトルクラスを選択する

于 2013-03-05T06:42:00.070 に答える