2012-10-10 22 views
22

Kann jemand den Unterschied für diese beiden CSS-Selektoren erklären?Was bedeutet der Punkt in CSS?

.work-container . h3 { 
font-size: 14px; 
margin-top: 0px; 
font-weight: 600; 
height: 27px; 
} 

Was ist der zusätzliche Punkt in der oberen Definition?

.work-container h3 { 
font-size: 14px; 
margin-top: 0px; 
font-weight: 600; 
height: 27px; 
} 
+5

Das erste Beispiel ist nicht gültig CSS. Wahrscheinlich ein Tippfehler. – steveax

+0

Die CSS wurde mir mit einer Reihe von seltsamen Eigenschaften gegeben, und ich bin nicht der CSS-Experte. –

Antwort

29

Ein . Präfix stellt in der Regel eine Klassenauswahl, aber wenn es sofort durch ein Leerzeichen gefolgt wird, dann ist es ein Syntaxfehler.

Wenn ich eine Vermutung zu wagen war, dann ist es wahrscheinlich der Autor gemeint .work-container > h3 zu sagen, aber verpasste die Shift-Taste, so wie er war, den > Charakter (die child combinator) einzugeben.

Ihr zweiter Selektor, .work-container h3, bedeutet einfach eine beliebige h3, die in einem Element mit einer Klasse namens work-container enthalten ist.

+2

Um schnell zu überprüfen, ob ein Stylesheet Syntaxfehler aufweist, ist http://jigsaw.w3.org/css-validator/ sehr praktisch. Die Fehlerbehandlungsregeln sind in der Spezifikation unter http://www.w3.org/TR/CSS21/syndata.html#parsing-errors definiert und in diesem Fall implizieren sie, dass die gesamte Regel ignoriert wird (aber andere Teile des Stils) Blatt sind nicht betroffen). –

+0

@BoltClock, in CSS, ich denke, Sie können auch einen Punkt zwischen etwas wie div.ui-datepicker haben. Wie erklärst du es? – Jogi

6

. sagt seine Klasse

# bedeutet, seine eine ID

und wenn es nichts anderes als die Wähler ist, dann ist es ein Tag

10

. in CSS bedeutet es eine Klasse ist, und es kann auf viele Elemente angewendet werden.

# in CSS bedeutet es eine ID ist, und es kann pro Seite ein Element angewendet werden.

Ohne die entweder ist es ein Tag, den ganzen Nutzungs Targeting.

In Ihrer Syntax, .work-container . h3 ist tatsächlich Fehler. Die . habe sein sollen entweder , oder als BoltClock sagten >, die den direkten Nachkommen Operator in CSS sagt.

4

. in CSS bedeutet, es ist eine Klasse & kann es zwischen den Klassen

Zum Beispiel zu viele Elemente unter Verwendung Raum angewendet werden:

<h3 class="class1 class2 class2">Heading</h3> 

# in CSS bedeutet, ist es eine ID und es kann auf ein Element pro Seite angewendet werden.

Zum Beispiel

<h3 id="idname1">Heading</h3> 
20

Hüllen

  • Selector mit Punkt beginnen

    .class_name bedeutet Klassennamen

  • Zwei vernarrt Wähler durch Leerzeichen getrennt

    .outside.inside

    bedeutet Element mit .inside Klasse von einem Element mit Klasse .outside abstammen

  • Zwei punktierte Selektor ohne Trennung

    .name1.name2

    bedeutet Element, das sowohl Klasse name1 und name2 zB: class="name1 name2"

stackoverflow Link1

stackoverflow Link2