Deutsch
Menü

Grundlagen der Webtechnologien

<style>
  #main p    { color: red; }
  .content p { color: green; }
  p.note     { color: blue; }
</style>
<div id="main" class="content">
  <p class="note">Hello</p>
</div>

Es gibt keine weiteren Stilangaben. Welche Farbe hat der Text „Hello“ im obigen HTML?

  1. ARot (red)
  2. BGrün (green)
  3. CBlau (blue)
Antwort und Erläuterung anzeigen

Antwort: A. Rot (red)

Treffen mehrere Regeln auf dasselbe Element zu, gewinnt die Regel, deren Selektor die höhere Spezifität hat. Die Spezifität wird als Tupel (Anzahl der IDs, Anzahl der Klassen, Attribute und Pseudoklassen, Anzahl der Elemente) verglichen: #main p hat (1, 0, 1), .content p und p.note haben beide (0, 1, 1); deshalb wird das Rot von #main p verwendet, das eine ID enthält. Bei Regeln gleicher Spezifität gewinnt die später geschriebene. Eine direkt im style-Attribut geschriebene Angabe oder eine mit !important hat Vorrang vor diesen.

Dieses Thema üben Zur Themenseite

Weitere Fragen zu Grundlagen der Webtechnologien

  1. Bei der Verarbeitung, die ein Browser bis zur Anzeige des ersten Bildschirms ausführt (dem kritischen Rendering-Pfad), hält ein ohne Attribute in <head> geschriebenes <script src="app.js"> das Parsen des HTML an dieser Stelle an. Wie verhält sich das Element, wenn es das Attribut defer erhält?
  2. In welcher Reihenfolge erscheinen die Zeichen in der Konsole, wenn das obige JavaScript im Browser ausgeführt wird?
  3. Welche URL hat nach der Same-Origin-Policy des Browsers denselben Ursprung wie https://www.example.com/app/index.html?
  4. JavaScript auf einer Seite unter https://app.example.com will mit fetch eine POST-Anfrage mit einem Body vom Content-Type application/json an https://api.example.net/orders senden. Welche Aussage über das Verhalten von CORS in diesem Fall ist richtig?
  5. Welche Aussage über einen Service Worker ist richtig?