Solución:
“>“es el selector de niños
““es el selector de descendientes
La diferencia es que un descendiente puede ser un hijo del elemento, o un hijo de un hijo del elemento o un hijo de un hijo de un hijo. ad inifinitum.
Un elemento hijo es simplemente uno que está contenido directamente dentro del elemento padre:
<foo> <!-- parent -->
<bar> <!-- child of foo, descendant of foo -->
<baz> <!-- descendant of foo -->
</baz>
</bar>
</foo>
para este ejemplo, foo * coincidiría <bar> y <baz>, mientras que foo > * solo coincidiría <bar>.
En cuanto a su segunda pregunta:
¿Cuál es más eficiente y por qué?
En realidad, no voy a responder a esta pregunta, ya que es completamente irrelevante para el desarrollo. Los motores de renderizado de CSS son tan rápidos que casi nunca * hay una razón para optimizar los selectores de CSS más allá de hacerlos lo más cortos posible.
En lugar de preocuparse por las microoptimizaciones, concéntrese en escribir selectores que tengan sentido para el caso en cuestión. Yo uso a menudo > selectores al aplicar estilo a listas anidadas, porque es importante distinguir a qué nivel de la lista se le aplica el estilo.
* Si realmente es un problema para renderizar la página, probablemente tenga demasiados elementos en la página o demasiado CSS. Luego, tendrá que ejecutar algunas pruebas para ver cuál es el problema real.
ul>li selecciona todo li que son hijos directos de ul mientras que ul li selecciona todo li que están en cualquier lugar dentro (descendiendo tan profundo como quieras) un ul
Para HTML:
<ul>
<li><span><a href="https://foroayuda.es/#">Something</a></span></li>
<li><a href="https://foroayuda.es/#">or Other</a></li>
</ul>
Y CSS:
li a{ color: green; }
li>a{ color: red; }
El color de Something permanecerá verde pero or Other será rojo
Parte 2, debe escribir la regla para que sea apropiada a la situación, creo que la diferencia de velocidad sería increíblemente pequeña y probablemente eclipsada por los caracteres adicionales involucrados en escribir más código, y definitivamente eclipsada por el tiempo que le toma al desarrollador pensar sobre eso.
Sin embargo, como regla general, cuanto más específico sea con sus reglas, más rápido los motores CSS pueden ubicar los elementos DOM a los que desea aplicarlo, por lo que espero li>a es más rápido que li a ya que la búsqueda DOM se puede interrumpir antes. También significa que los anclajes anidados no tienen estilo con esa regla, ¿es eso lo que quieres? <~~ pregunta mucho más pertinente.
ul > li > a selecciona solo los hijos directos. En este caso solo el primer nivel <a> del primer nivel <li> dentro de <ul> será seleccionado.
ul li a por otro lado seleccionará TODO <a>-s en TODOS <li>-s en la lista desordenada
Ejemplo de ul > li
ul > li.bg {
background: red;
}<ul>
<li class="bg">affected</li>
<li class="bg">affected</li>
<li>
<ol>
<li class="bg">NOT affected</li>
<li class="bg">NOT affected</li>
</ol>
</li>
</ul>si estuvieras usando ul li – Toda la li-s se vería afectado
ACTUALIZAR El orden de los selectores CSS más a menos eficientes es el siguiente:
- ID, p. Ej.
#header - Clase, p. Ej.
.promo - Tipo, por ejemplo
div - Hermano adyacente, p. Ej.
h2 + p - Niño, p. Ej.
li > ul - Descendiente, p. Ej.
ul a - Universal, es decir
* - Atributo, p. Ej.
[type="text"] - Pseudoclases / elementos, p. Ej.
a:hover
Entonces, su mejor apuesta es usar el children selector en lugar de solo descendant. Sin embargo, la diferencia en una página normal (sin decenas de miles de elementos por recorrer) puede ser absolutamente insignificante.