Pourquoi sélecteur CSS avec le signe > (enfant direct) remplace les styles par défaut?

Question

Quelqu'un pourrait-il m'expliquer pourquoi CSS > (signe direct de l'enfant) l'emporte sur la couleur par défaut de tous les <li> balises dans cet exemple:

ul > li {
  color:red;
}

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul> 

Résultat attendu:

Résultat réel:

Je sais que je peux le résoudre en ajoutant li { color: black; }, mais je me demandais pourquoi ul > li remplace la couleur par défaut de <li>?

Answer 1

Le problème n'est pas l'enfant du combinator (>), c'est l' color de la propriété, qui est héritable.

Bien que la valeur initiale de l' color de la propriété varie d'un navigateur à l', inherit est commun. Cela signifie qu'un élément de couleur de texte est hérité de la mère. Vous voyez ce dans votre code.

En revanche, l' border de la propriété n'est pas héréditaire. Notez comment, à la différence de la couleur du texte, il s'applique uniquement à votre ciblées li:

ul > li {
  color: red;
  border: 1px solid black;
}

li { border: 1px solid inherit !important; }

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul>

Pour atteindre votre style objectif, définir une couleur par défaut pour l' li élément. Cela va remplacer inherit. Voici un exemple:

ul > li {
  color: red;
}
li {
  color: black;
}

<ul>
  <li>This should be red
    <ol>
      <li>default color 1</li>
      <li>default color 2</li>
    </ol>
  </li>
  <li>And this should be red also
    <ol>
      <li>default color 3</li>
      <li>default color 4</li>
    </ol>
  </li>
</ul>

Références:

• 14.1 la couleur de premier plan: l' color de la propriété
• 6.2.1 L' inherit de la valeur

Answer 2

La valeur par défaut pour l' color de la propriété, pour la plupart des éléments, est - inherit, pas black. Cela signifie qu'il prend n'importe quelle valeur à la mère (ol) de l'élément a de. (Et c'est après l' ol hérite de la rouge li).

Vous devez définir explicitement la couleur à remplacer. Par exemple:

ul > li li {
   color: black;
}

ou

ol > li {
   color: black;
}

Answer 3

L' ol hérite les styles. Vous aurez besoin de spécifier des styles à l'intérieur de la liste.