Wie 3. div auszuwählen, die bestimmte CSS-Klasse hat

Question

<div class="boxcontent"> 

<div>some content this div may be missing [dynamic genrated]</div> 

<div class="elem"></div> 
<div class="elem"></div> 
<div class="elem"></div> 
</div> 

<div class="boxcontent"> 


<div class="elem"></div> 
<div class="elem"></div> 
<div class="elem"></div> 
</div> 


<div class="boxcontent"> 


<div class="elem"></div> 
<div class="elem"></div> 
<div class="elem"></div> 
</div> 

ich ein Problem festgestellt, dass, wenn ich sie wählen css3 Wähler n-Kind mit (3) dann sie 2. div in erster .boxcontnent div wählen.

, wenn ich sagen, das letzte Mal, wenn sie auf den Punkt, aber nie das Gefühl, das Problem, das ich hier habe, ist die Ansicht:

http://jsfiddle.net/szz3C/1/

ich will 3. div oder alle boxcontent Klasse div auszuwählen, aber in der ersten Box i 2. div select statt dritt gefunden.

sind ihre jeder sollution dies sogar mit css3 oder jQuery Dank für die Unterstützung zu lösen, wenn jemand diese

Answer 1

lösen kann

Es ist nicht gut „3. Klasse“ Selektor (oder jede andere relationale Klasse Basis Selektor, sie‘ alle Geschwister basierend, einschließlich auf Typ).

Ihre beste Alternative (das Beispiel) wäre hier :nth-last-child(), die den es das letzte-Kind in seiner Mutter .box<div>wenn wird, wie folgt aus:

div.box:nth-last-child(1){ background-color:green; } 

You can try it out here.

Answer 2

könnten Sie

versuchen

.boxcontent .elem+.elem+.elem { /*3rd .elem*/ } 
.boxcontent .elem+.elem+.elem+.elem { /*reset css if there are 4 .elem divs*/ } 

auch die :last-child Selektor ist

Answer 3

Ich denke, Sie verwenden können: Last-Kind für alles, aber IE8 und unten. Verwenden Sie Jquery, um das abzudecken?

$(".boxcontent:last-child").css({color:"red"}); 

Aber ich würde Javascript nicht vertrauen, um irgendetwas wichtiges zur Struktur zu tun.

http://www.quirksmode.org/css/contents.html

Answer 4

Versuchen Sie, diese CSS:

div:nth-of-type(3) { ... }