No dudes en compartir nuestro espacio y códigos en tus redes, danos de tu ayuda para hacer crecer esta comunidad.
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 hasta el infinito.
Un elemento secundario es simplemente uno que está contenido directamente dentro del elemento principal:
para este ejemplo, foo * coincidiría foo > * solo coincidiría
En cuanto a tu 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. a menudo uso > selectores al diseñar listas anidadas, porque es importante distinguir a qué nivel de la lista se está aplicando estilo.
* si realmente es un problema en la representación de la página, probablemente tenga demasiados elementos en la página o demasiado CSS. Luego, deberá realizar 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:
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 para 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 toma el desarrollador para pensar sobre eso
Sin embargo, como regla general, cuanto más específico sea con sus reglas, más rápido los motores CSS podrán ubicar los elementos DOM a los que desea aplicarlo, así que espero li>a es más rápido que li a ya que la búsqueda de DOM se puede acortar antes. También significa que los anclajes anidados no están diseñados 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 del primer nivel
será seleccionado.
Ejemplo de ul > li
ul > li.bg
background: red;
- affected
- affected
-
- NOT affected
- NOT affected
si estuvieras usando ul li – Toda la li-s se vería afectado
ACTUALIZAR El orden de los selectores CSS de más a menos eficientes es el siguiente:
- identificación, por ejemplo
#header - clase, por ejemplo
.promo - Tipo, por ejemplo
div - Hermano adyacente, por ejemplo
h2 + p - Niño, por ejemplo
li > ul - descendiente, por ejemplo
ul a - universal, es decir
* - Atributo, por ejemplo
[type="text"] - Pseudo-clases/-elementos, por ejemplo
a:hover
Así que 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 para revisar) podría ser absolutamente insignificante.
Si eres capaz, tienes la opción de dejar un enunciado acerca de qué le añadirías a esta crónica.