Français
Menu

Bases des technologies web

<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>

On suppose qu'il n'y a aucune autre règle de style. Dans le HTML ci-dessus, de quelle couleur est le texte « Hello » ?

  1. ARouge (red)
  2. BVert (green)
  3. CBleu (blue)
Afficher la réponse et l'explication

Réponse : A. Rouge (red)

Lorsque plusieurs règles s'appliquent au même élément, c'est la règle dont le sélecteur a la plus grande spécificité qui l'emporte. La spécificité se compare comme un triplet (nombre d'ID, nombre de classes, d'attributs et de pseudo-classes, nombre d'éléments) : #main p vaut (1, 0, 1), tandis que .content p et p.note valent tous deux (0, 1, 1). C'est donc le rouge de #main p, qui contient un ID, qui s'applique. Entre règles de même spécificité, celle qui est écrite en dernier l'emporte. Une déclaration écrite directement dans l'attribut style ou marquée !important passe avant tout cela.

S'entraîner sur ce thème Retour au thème

Autres questions sur Bases des technologies web

  1. Dans le traitement qui mène le navigateur jusqu'au premier affichage (le chemin de rendu critique, ou critical rendering path), un élément <script src="app.js"> sans attribut placé dans <head> arrête l'analyse du HTML à cet endroit. Quel comportement est correct si l'on ajoute l'attribut defer à cet élément ?
  2. Lorsqu'on exécute le JavaScript ci-dessus dans un navigateur, quel est l'ordre correct d'affichage des caractères dans la console ?
  3. Selon la politique de même origine des navigateurs, quelle URL est considérée comme de même origine que https://www.example.com/app/index.html ?
  4. Le JavaScript d'une page de https://app.example.com veut envoyer avec fetch une requête POST vers https://api.example.net/orders, avec un corps de type Content-Type: application/json. Quel comportement de CORS est correct dans ce cas ?
  5. Quelle description d'un Service Worker est correcte ?