2017-05-15 2 views
-3

Ich versuche, Stile mit nth Kind auf jedes 3., 4. und 5. Kind anzuwenden, dann auf jedes 8., 9., 10. Kind. Dann 13, 14, 15 ... So wenden Sie Stile auf 3 Kinder, dann zu Kindern und wenden Sie die gleichen Stile auf andere 3 Kinder, etc.Ntes Kind CSS - Wenden Sie Stile auf alle 2 Kinder an

Hier ist ein Bild, das zu erklären, was ich versuche zu tun: zutreffen Stile zu den orangefarbenen Kindern, wenn sie Hunderte von Kindern sein werden enter image description here

+1

Hallo. Ihre Frage, obwohl interessant, liefert nicht zu viele Informationen, um eine gute Antwort geben zu können. Bitte teilen Sie Ihren Code und zeigen Sie uns auch, was Sie versucht haben oder zumindest eine allgemeine Richtung Ihrer Gedanken zur Lösung dieses Problems. Vielen Dank! –

+0

Es ist schwer zu erklären ... Grundsätzlich möchte ich den orangefarbenen Kindern einige Stile hinzufügen. Das Bild zeigt, wie meine Vorlage aussehen wird und ich versuche, ein anderes CSS auf diese Kinder anzuwenden, aber ich kann nicht den Weg finden, es mit nth Kind zu tun ... – patie

+0

Ich nehme, dass alle Kinder haben gleiche Klassen und Styling für jetzt, abgesehen von der Breite und Farbe? – gaganshera

Antwort

0

Sie können das obige Ergebnis mit nth-of-type Eigenschaft von CSS erreichen. zB: mit nth-of-type(5n+3), ich sage die CSS auf jedem 5. Elemente aus der Startnummer 3.

.test{ 
 
    width: 300px; 
 
    border: 5px solid cyan; 
 
    padding: 25px; 
 
} 
 
.test:nth-of-type(5n+3) { 
 
    width: 300px; 
 
    border: 5px solid orange !important; 
 
    padding: 25px; 
 
} 
 
.test:nth-of-type(5n+4) { 
 
    width: 300px; 
 
    border: 5px solid orange !important; 
 
    padding: 25px; 
 
} 
 
.test:nth-of-type(5n+5) { 
 
    width: 300px; 
 
    border: 5px solid orange !important; 
 
    padding: 25px; 
 
}
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div>

Weiterführende Literatur angewandt werden, siehe dazu: http://nthmaster.com/

Verwandte Themen