Wie wende ich einen CSS-Stil an eine Klasse an, die keine Unterklasse enthält

Question

Ich muss einen Stil für das div in der ersten faq-category-group-Klasse festlegen, ohne den Stil der faq-category-group zu beeinflussen ein FAQ-Kategorie-Einzug. Wie kann das gemacht werden?

Die Klassen werden automatisch von einem PHP-Modul generiert. Daher ist es nicht möglich, die Klassennamen zu ändern, um die Selektoren einfacher zu machen.

<div class="faq"> 
    <div class="faq-category-group">Content</div> 

    <div class="faq-category-indent"> 
     <div class="faq-category-group">Content</div> 
    </div> 
</div> 

Answer 1

Durch diese Struktur, wählen Sie nur Gruppen, die Kinder von <div class="faq"> und anwenden, um die Stile, die Sie gegliederten Gruppen angewendet nicht wollen. Die Gruppen, die in <div class="faq-category-indent"> enthalten sind, sind nicht betroffen.

.faq .faq-category-group { 
    /* Styles for all groups */ 
} 

.faq > .faq-category-group { 
    /* Styles for non-indented groups */ 
} 

Dies setzt natürlich voraus, dass Sie sich nicht um IE6 kümmern. Ansonsten ist eine weitere, ausführlichere Lösung dieses:

.faq .faq-category-group, .faq .faq-category-indent .faq-category-group { 
    /* Styles for all groups */ 
} 

.faq .faq-category-group { 
    /* 
    * Styles for non-indented groups. 
    * Works because .faq .indent .group above is more specific than 
    * this one, so the above rule will override this one. 
    */ 
} 

hier ein jsFiddle example ist, dass beide Fälle abdeckt.

Answer 2

.faq > .faq-category-group { 
    /*style*/ 
} 

sollte funktionieren

Quelle: http://www.w3.org/TR/css3-selectors/

Answer 3

Sie haben individuell den Unterschied in den Klassen zu spezifizieren:

.faq .faq-category-group 
{ 
    color: #00ff00; 
} 

.faq .faq-category-indent .faq-category-group 
{ 
    color: #0000ff; 
} 

Dies wird den einen nach dem übergeordneten Stil zwingen .faq und die andere nach dem Stamm .faq-category-indent.