c2b_default

CSS-Spezifität

CSS-Gewichtungen

CSS-Gewichtungen

13
0.0 (0)
L. K.
Lernen
L. K.
Diese Lernkarten behandeln das Thema CSS-Spezifität auf Berufslehre-Niveau. Sie erklären, wie Farben, Gewichte und Selektoren wie `#000000` oder `:nth` in CSS funktionieren, sowie die Bedeutung von `!important` und Inline-Styles. Die Karteikarten behandeln auch die Hierarchie von Selektoren, die Bedeutung von Klassen, Elementen und IDs, und wie Browser diese Regeln interpretieren. Webentwickler und Designer profitieren von diesen Lernkarten, da sie ihnen helfen, CSS-Regeln effektiv zu strukturieren und Konflikte zu vermeiden.
Karten
13
Lernende
5
Sprache
Deutsch
Kategorie
Marketing
Stufe
Berufslehre
Erstellt / Aktualisiert
23.03.2018 / 30.10.2021
  • 1  / 13

Lernkarten

Wenn zwei identische CSS-Selektoren in einem Stylesheet stehen, welcher wird vom Browser dann interpretiert?

Ein Stylesheet beinhaltet zwei identische Selektoren:

#nav-main ul li a {color: green;}

#nav-main ul li a {color: red;}

Welcher wird vom Browser interpretiert?

Wann wird eine CSS-Regel von einer Regel überschrieben, die weiter unten notiert ist?

Wenn beide Selektoren identisch sind und das gleiche Gewicht haben.

Können festgelegte Gewichtungen von IDs, HTML-Elementen und Klassen verändert werden?

Durch was bestimmt sich das Gewicht des ganzen CSS-Selektors?

Durch die Summe der einzelnen Bestandteile.

Welches Element hat ein höheres Gewicht?

Welches Element hat ein höheres Gewicht?

Welches Element hat ein höheres Gewicht?

Welches Element hat ein höheres Gewicht?

Welches Element hat ein höheres Gewicht?

Liste die folgenden CSS-Selektoren nach Gewicht auf (Höchstes Gewicht - Niedrigstes Gewicht)

 

CSS-Klassen (z.B. .alert, .js) = 10 Punkte

HTML-Elemente (z.b. h1, p, blockquote )

Pseudo-Klassen/Elemente (z.B. :nth-of-type)

!important !important gewinnt immer, es sei denn mehere Selektoren haben ein !important erhalten.

Inline-Styles (z.B. <h1 style="color: red;"></h1>)

CSS-IDs (z.B. #container, #header)

1. !important !important gewinnt immer, es sei denn mehere Selektoren haben ein !important erhalten.

2. Inline-Styles (z.B. <h1 style="color: red;"></h1>)

3. CSS-IDs (z.B. #container, #header)

4. Pseudo-Klassen/Elemente (z.B. :nth-of-type) / CSS-Klassen (z.B. .alert, .js)

5. HTML-Elemente (z.b. h1, p, blockquote ) = 1 Punkt

Was ist die Funktion von !important?

Überschreibt einen identischen Selektor ohne !important.

Was ist der Nachteil von !important?

  • Lässt sich schwer überschreiben
  • Nimmt dem Dokument Flexibilität

Study