Saltar al contenido

Selectores de CSS ul li a {…} vs ul> li> a {…}

octubre 18, 2021
apple touch icon@2

«>» es el selector de niños

«» is the descendant selector

The difference is that a descendant can be a child of the element, or a child of a child of the element or a child of a child of a child ad inifinitum.

A child element is simply one that is directly contained within the parent element:

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

close