Sélecteurs CSS ul li a {…} vs ul> li> a {…}

Le "ul li a …" et "ul> li> a …"Sont utilisés comme sélecteurs CSS ajoutés dans l'élément de style CSS pour sélectionner la liste non ordonnée et ses éléments créés dans le corps HTML, puis appliquer les propriétés CSS sur cette liste non ordonnée.

Dans cet article, nous discuterons de la différence entre le CSS "ul li a …" et "ul> li> a …»Sélecteurs.

Objectif d'utiliser «UL», «Li» et «A» dans HTML

"ul»Signifie List non ordonné. Son objectif est de créer une liste non ordonnée dans la sortie sous la forme à puces. "li"Est utilisé pour ajouter un élément de liste. Un "<un> ”(Balise d'ancrage) est utilisée pour ajouter le lien hypertexte. Supposons que nous ayons l'extrait de code HTML suivant pour générer une liste non ordonnée:

• Liste 1, article 1


• Liste 1, article 2


• Liste 1, article 3


• 
  
  
  
  
  
  • Enfant de la liste 1, article 1
  
  

  • Enfant de la liste 1, article 2

  
  

  • Enfant de la liste 1, article 3

  
  
  
  
  
  
  • Enfant de la liste 2, article 1
  
  

  • Enfant de la liste 2, article 2

  
  
  
  

  Dans l'extrait de code ci-dessus:

  • Le "
    "L'élément a trois"
    • »Répertoriez les éléments comme ses éléments enfants. Le "
    • Les éléments "ont des attributs" HREF "et les éléments de la liste sont nommés.
    • Dans le même "
      "Élément, nous en avons spécifié un autre"
      »Élément comme sa liste d'enfants non ordonnés. La seule différence est que deux des ««
      • "Les éléments ont"

        »(Paragraphe) Dans les éléments de l'élément de liste.

      • L'enfant de la première liste non ordonnée a également un élément de liste sans «

        "Et l'autre avec"

        ".

      Utilisation ul li a … en html

      Quand le "ul li a …"Est ajouté dans l'élément de style CSS sans symbole entre eux, cela signifie qu'il s'agit d'un sélecteur descendant. Les propriétés du CSS, dans ce cas, impliqueront tous les éléments, qu'il s'agisse d'éléments enfants directs du «ul" et "li" ou non:

      ul li a
      La couleur rouge;
      

      Les propriétés CSS impliqueront tous les éléments enfants dans ce cas:

      Utilisation ul> li> a … en html

      Le "ul> li> a …»Implémente les propriétés CSS aux seuls éléments enfants directs. Par exemple, cela n'impliquera que les éléments qui ont les ul li et a et aucun autre élément entre eux:

      ul> li> a
      Couleur bleue;
      

      En conséquence, la sortie suivante sera générée:

      Cela résume la différence entre le CSS "ul li a …" et "ul> li> a …".

      Conclusion

      Le "ul li a …«Le sélecteur CSS est-il utilisé pour sélectionner la liste non ordonnée et appliquer les propriétés de style aux éléments de la liste non ordonnés de l'enfant, puis leurs éléments enfants, etc. Tandis que le "ul> li> a …"Est utilisé pour appliquer les propriétés CSS sur la liste non ordonnée uniquement lorsque le«li" et "un«Sont l'enfant direct du«ul»Et il n'y a pas d'autre élément entre les deux.