Verschachteln von CSS-Klassen

Question

Kann ich etwas wie das Folgende tun?

.class1{some stuff} 

.class2{class1;some more stuff} 

Answer 1

Nicht möglich mit Vanille CSS.

• Sass

Sass macht CSS wieder Spaß: Aber Sie so etwas wie verwenden können. Sass ist eine Erweiterung von CSS3, verschachtelte Regeln, Variablen, Mixins, Selektor Vererbung und vieles mehr. Es ist in gut formatiert, Standard-CSS mit das Befehlszeilenprogramm oder ein Web-Framework-Plugin übersetzt.

Oder

• Less

Anstatt lange Wähler Namen konstruieren Erbe zu spezifizieren, in weniger können Sie einfach Nest Selektoren innerhalb anderen Selektoren. Dies macht Vererbung klar und Stylesheets kürzer.

Beispiel:

#header { 
    color: red; 
    a { 
    font-weight: bold; 
    text-decoration: none; 
    } 
} 

Answer 2

Nicht direkt. Aber Sie können Erweiterungen wie LESS verwenden, um Ihnen das gleiche zu erreichen.

Answer 3

Nicht mit reinem CSS. Das nächstgelegene entspricht dies:

.class1, .class2 { 
    some stuff 
} 

.class2 { 
    some more stuff 
} 

Answer 4

Nr

können Sie grouping selectors verwenden und/oder mehrere Klassen auf einem einzigen Element, oder Sie können eine Template-Sprache und verarbeiten sie mit Software benutzen, um Ihre CSS zu schreiben.

Siehe auch meinen Artikel auf CSS inheritance.

Answer 5

Ich glaube nicht, dass das möglich ist. Sie könnten class1 zu allen Elementen hinzufügen, die auch class2 haben. Wenn dies manuell nicht möglich ist, können Sie dies automatisch mit JavaScript tun (relativ einfach mit jQuery).

Answer 6

Aktualisierung: Es gibt eine CSS3-Spezifikation für CSS-Level 3-Verschachtelung. Es ist derzeit ein Entwurf. https://tabatkins.github.io/specs/css-nesting/

Sollte diese genehmigt werden, würde die Syntax wie folgt aussehen:

table.colortable { 
    & td { 
    text-align:center; 
    &.c { text-transform:uppercase } 
    &:first-child, &:first-child + td { border:1px solid black } 
    } 
    & th { 
    text-align:center; 
    background:black; 
    color:white; 
    } 
} 

Answer 7

Try this ...

Geben Sie dem Element eine ID, und auch der Name einer Klasse. Dann können Sie den #IDName verschachteln.Klassenname in Ihrem CSS.

Hier ist eine bessere Erklärung https://css-tricks.com/multiple-class-id-selectors/