Wie wählt man das erste Element jeder Klasse mit CSS

Question

Der Code ist bereits geschrieben, ohne dass jede Klasse ein Elternteil hat. :(-So jetzt ist die ganze Seite eine Reihe von Abschnitten. Klassen können eine beliebige Anzahl von Abschnitten mit einer beliebigen Anzahl von Artikeln in jedem Abschnitt haben. Sie festgestellt, dass jede Klasse eine Kategorie war, weshalb einige Klassen viele Abschnitte haben. Ich brauche nur eine linke und obere Grenze, für jede Klasse/Kategorie, so dass alle Abschnitte in jeder Kategorie mit verschiedenen Farben gruppiert sind.Anders als ich schreibe mehr HTML und geben Sie jeder Kategorie eine eigene Div-Eltern, versuche ich CSS-Selektoren zu verwenden den ersten Abschnitt jeder Klasse greifen.

jsfiddle mit Code gestartet, aber viel mehr noch zu codieren.

<section class="a"> 
    <article>class a article one section one</article> 
    <article>class a article two section one</article> 
</section> 
<section class="a"> 
    <article>class a article one of section 2</article> 
</section> 
<section class="b">... 

ich über jeden Abschnitt ein border-top mag, dass ein startet neue Klasse. also Klasse "a" nur eine erste Sektion wird eine rote obere Grenze haben, Klasse b erste Sektion wird eine blaue Grenze haben, und so weiter. Ich fügte eine Klasse namens top hinzu und fügte sie in die Abschnitte ein, die ich brauchte, aber gab es einen besseren Weg als diesen?

css starts here 
.a{border-left:solid red;} 
.a.top{border-top:solid red;} 
.b{border-left:solid green;} 
.b.top{border-top:solid green;} 
.c ... 
....all the way to class z+ 

Ich versuchte css4 mit - aber Browsern noch nicht verwenden.

:nth-match(1 of section.a{border-top:solid red;} 

Ich habe viele Abschnitte noch nicht gestartet, weshalb ich hoffe, dass es einen schnelleren Weg gibt. Jquery ist nicht ausgeschlossen, habe noch nicht darüber nachgedacht.

Answer 1

Nein, es ist nicht möglich becau Alle CSS-Selektoren selektieren Element des Typs.

und leider gibt es keinen Selektor wie First-of-Class oder so ähnlich. Link für alle Css-Selektoren: http://www.w3schools.com/cssref/css_selectors.asp

Sie können [Attribut = Wert] verwenden, aber es ist nur Zweck zu überprüfen Wetter ersten Abschnitt hat dieses Attribut mit bereitgestellten Wert oder nicht.

Sie haben Javascript zu verwenden oder was auch immer andere Sprache, die Sie mit arbeiten, um die Art und Weise zu wählen (von der ersten Klasse vom Typ)

Answer 2

Wenn Sie einzigartige Klasse wie verwenden „class =‚a‘“ für den gesamten Abschnitt können Sie einfach

.a{border-left:solid blue;border-top:solid blue;} 

Wenn nicht, können Sie mit jQuery versuchen, alle Abschnitte erhalten und setzen CSS

var sections = $('section'); 
$.each(sections, function(index, section){ 
    $(section).css('color', 'red'); 
}); 

Edit: wenn Sie unterschiedliche Farbe wünschen können Sie einige Array mit Farben haben und sie durch eine Berechnung ändern, bevor Sie das Farbattribut setzen (in Beispiel ‚rot‘)