Wie wähle ich mehrere Klassen in CSS?

Question

Gibt es eine kürzere Möglichkeit, all diese Dinge nur mit der ID auszuwählen?

#load p, 
#load h1, 
#load h2, 
#load h3, 
#load h4, 
#load h5, 
#load h6 { 
    font-size: 80%; 
    margin:2%; 
} 

Answer 1

Nicht, wenn Sie alles wollen. Sie können alles mit #load * bekommen.

Answer 2

wenn sie immer direkte Kinder von #load sein werden, könnte man

#load > * { 
    font-size: 80%; 
    margin: 2%; 
} 

tun, aber denken Sie daran, dass diese Regeln für ein unmittelbares Kind #load

gelten sonst könnten Sie auch entscheiden, alle, eine Klasse, wie zum Beispiel load-child

#load .load-child { 
    font-size: 80%; 
    margin: 2%; 
} 

Answer 3

In CSS zu geben, bestimmte Eigenschaften erben t Die Eigenschaften der Kapselung von HTML-Elementen (sofern nicht manuell überschrieben). Dies bedeutet also, dass man konnte einfach tun:

#load { 
 
    font-size: 40px; 
 
    margin: 2%; 
 
}

<div id=load> 
 
    <p>hello from p</p> 
 
    <h3>hello form h3</h3> 
 
</div>

Wie Sie sehen können herefont-size standardmäßig ist eine erbliche Eigenschaft. (Diese Referenz ist CSS2 - Ich kann die CSS3 man überall finden?)

Dies bedeutet also, der requried #load CSS jetzt seine Kinder h und p Elemente kapselt.

Hinweis Ich gebe nur 40px für die Sichtbarkeit in das Beispiel.

https://www.w3.org/wiki/Inheritance_and_cascade ist ein gutes schnelles Lesen der Elementvererbung, aber zusammenzufassen;

Durch die Vererbung können Eigenschaften auf übergeordneten Elementen deklariert werden, und diese Eigenschaften können auf alle untergeordneten Elemente reduziert werden. Nur einige Eigenschaften werden standardmäßig vererbt, aber die Vererbung kann mit dem Schlüsselwort erben erzwungen werden.

Answer 4

Sie können immer eine Klasse auf die Elemente hinzufügen:

<h1 class="myclass"></h1> 
<h2 class="myclass"></h2> 
etc... 

And then select them all with that class: 

#load .myclass { 
    font-size: 80%; 
    margin:2%; 
} 

---

Wenn Sie SASS (oder jede CSS-Präprozessor), dann würde es in etwa so aussehen:

#load { 
    p, h1, h2, h3, h4, h5, h6 { 
    font-size: 80%; 
    margin: 2%; 
    } 
} 

SASS muss drin sein angehalten auf dem Server, der dann den Code zu reinem CSS kompiliert. Das Ergebnis wird dasselbe sein, das Sie in der Frage gepostet haben.

---

Auch ich bin, diese als Option,
gibt es die passende CSS-Selektor:

#load :-moz-any(p, h1, h2, h3, h4, h5, h6) { /* firefox 4+*/ 
    font-size: 80%; 
    margin:2%; 
} 

#load :-webkit-any(p, h1, h2, h3, h4, h5, h6) { /* chrome 15+, safari 5+, opera 15+ */ 
    font-size: 80%; 
    margin:2%; 
} 

Es gibt keine Unterstützung für die matching selector von IE/Edge