Selectores CSS UL Li A {…} vs ul> li> a {...}

El "ul li a ..." y "ul> li> a …"Se utilizan como selectores CSS agregados en el elemento de estilo CSS para seleccionar la lista no ordenada y sus elementos creados en el cuerpo HTML y luego aplicar propiedades CSS en esa lista desordenada.

En este artículo, discutiremos la diferencia entre el CSS "ul li a ..." y "ul> li> a …"Selectores.

Propósito de usar "UL", "Li" y "A" en HTML

"ul"Significa Lista desordenada. Su propósito es crear una lista desordenada en la salida en el formulario con viñeta. "li"Se usa para agregar un elemento de lista. Un "<a> ”(Etiqueta de anclaje) se usa para agregar el enlace de hipertexto. Supongamos que tenemos el siguiente fragmento de código HTML para generar una lista desordenada:

• Lista 1, elemento 1


• Lista 1, elemento 2


• Lista 1, elemento 3


• 
  
  
  
  
  
  • Niño de la lista 1, elemento 1
  
  

  • Niño de la lista 1, elemento 2

  
  

  • Niño de la lista 1, artículo 3

  
  
  
  
  
  
  • Niño de la lista 2, elemento 1
  
  

  • Niño de la lista 2, elemento 2

  
  
  
  

  En el fragmento de código arriba:

  • El "
    "El elemento tiene tres"
    • "Listar elementos en él como elementos infantiles. El "
    • "Los elementos tienen atributos" href "y los elementos de la lista se nombran.
    • En el mismo "
      "Elemento, hemos especificado otro"
      El elemento como su lista de niños desordenados. La única diferencia es que dos de los "
      • "Los elementos tienen"

        ”(Párrafo) dentro de los elementos del elemento de la lista.

      • El hijo de la primera lista desordenada también tiene un elemento de lista sin "

        "Y el otro con"

        ".

      Usando ul li a ... en html

      Cuando el "ul li a ..."Se agrega en el elemento de estilo CSS sin símbolo entre ellos, significa que es un selector descendiente. Las propiedades de CSS, en este caso, implicarán todos los elementos si son elementos infantiles directos del "ul" y "li" O no:

      ul li a
      color rojo;
      

      Las propiedades CSS implicarán todos los elementos infantiles en este caso:

      Usando ul> li> a ... en html

      El "ul> li> a …"Implementa las propiedades de CSS solo a los elementos infantiles directos. Por ejemplo, implicará solo los elementos que tienen el UL Li y A y ningún otro elemento entre ellos:

      ul> li> a
      color azul;
      

      Como resultado, se generará la siguiente salida:

      Esto resume la diferencia entre el CSS "ul li a ..." y "ul> li> a …".

      Conclusión

      El "ul li a ..."¿Se utiliza el selector CSS para seleccionar la lista desordenada y aplicar las propiedades de estilo a los elementos de la lista no ordenada del niño y luego los elementos de sus hijos, etc. Mientras que la "ul> li> a …"Se utiliza para aplicar las propiedades de CSS en la lista desordenada solo cuando el"li" y "a"Son el hijo directo del"ul"Y no hay otro elemento en el medio.