CSS-ID und Klassenselektoren

Question

Was bedeuten diese beiden CSS-Selektoren?

h1#myItemOne h2 
{ 
    background:#0099FF; 
    color: #A3F4A3; 
} 

h1.myItemTwo h2 
{ 
    background:#0099FF; 
    color: #A3F4A3; 
} 

Sind diese beiden Selektoren gültig?

Answer 1

Die erste entspricht ein H2-Element, das eine Kind Nachfahre eines h1 Elements mit der ID ist myItemOne

Beispiel:

<h1 id="myItemOne"> 
    <h2>Me!</h2> 
</h2> 

Die zweite entspricht ein H2-Element, das ein Kind ist Nachkomme eines h1 Elements mit der KlassemyItemTwo

Beispiel:

<h1 class="myItemTwo"> 
    <h2>Me!</h2> 
</h2> 

Sie sind beide gültig. Der Hauptunterschied besteht darin, dass ID eindeutig sein sollte. Die Klasse hat diese Anforderung nicht.

Referenz: http://www.w3.org/TR/CSS2/selector.html

Answer 2

h1#myItemOne h2 { background:#0099FF; color: #A3F4A3; } 

bedeutet jede h2, die ein Nachkomme einer h1 Element mit ID gleich "myItemOne" ist

h1.myItemTwo h2 { background:#0099FF; color: #A3F4A3; } 

jede h2 bedeutet, dass ein Nachkomme eines h1 Element ist mit Klasse gleich "myItemOne"

Answer 3

"#" definiert eine eindeutige ID in einer Seite, der Punkt definiert eine Klasse, die Sie an mehreren Stellen verwenden können.

Verbrauch:

<h1 id="...."></h1> 
<h1 class="...."></h1>