html - pseudo - selector de hijos css

¿Por qué el selector CSS con> sign(hijo directo) anula los estilos predeterminados?

Question

¿Podría alguien explicarme por qué CSS > sign (hijo directo) anula el color predeterminado de todas las etiquetas <li> en este ejemplo?

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> 

Resultado Esperado:

Resultado actual:

Sé que puedo solucionarlo agregando li { color: black; } li { color: black; } , pero me pregunto por qué ul > li anula el color predeterminado para <li> ?

Answer 1

El ol hereda los estilos. Deberá especificar los estilos para la lista interna.

Answer 2

El problema no es el combinador infantil ( > ), es la propiedad del color , que es heredable.

Aunque el valor inicial de la propiedad de color varía de un navegador a otro, inherit es común. Esto significa que el color del texto de un elemento se hereda del padre. Estás viendo esto en tu código.

Por el contrario, la propiedad border no es heredable. Tenga en cuenta cómo, a diferencia del color del texto, se aplica solo a su li dirigido:

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>

Para lograr su objetivo de estilo, establezca un color predeterminado para el elemento li . Esto anulará inherit . Aquí hay un ejemplo:

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>

Referencias

• 14.1 Color de primer plano: la propiedad de color
• 6.2.1 El valor inherit

Answer 3

El valor predeterminado para la propiedad de color , para la mayoría de los elementos, es inherit , no black . Esto significa que toma cualquier valor que tenga el elemento padre ( ol ). (Y eso es después de que el ol hereda de la li roja).

Debería establecer un color explícito para anularlo. Por ejemplo:

ul > li li {
   color: black;
}

o

ol > li {
   color: black;
}