CSS -Selektoren ul li a {…} gegen ul> li> a {…}

Der "ul li a …" Und "ul> li> a …”Werden als CSS -Selektoren verwendet, die im CSS -Stilelement hinzugefügt wurden, um die nicht ordnungsgemäße Liste und ihre Elemente im HTML -Körper erstellt zu haben und dann CSS -Eigenschaften auf diese nicht ordnungsgemäße Liste anzuwenden.

In diesem Artikel werden wir den Unterschied zwischen dem CSS erörtern “ul li a …" Und "ul> li> a …”Selektoren.

Zweck der Verwendung von "UL", "li" und "a" in HTML

“ul”Steht für ungeordnete Liste. Sein Zweck ist es, eine ungeordnete Liste in der Ausgabe in der Bulleted -Form zu erstellen. “li”Wird verwendet, um ein Listenelement hinzuzufügen. Ein "<A> ”(Anchor -Tag) wird verwendet, um den Hypertext -Link hinzuzufügen. Nehmen wir an, wir haben den folgenden HTML -Code -Snippet, um eine nicht ordnungsgemäße Liste zu generieren:

• Liste 1, Punkt 1


• Liste 1, Punkt 2


• Liste 1, Punkt 3


• 
  
  
  
  
  
  • Kind der Liste 1, Punkt 1
  
  

  • Kind der Liste 1, Punkt 2

  
  

  • Kind der Liste 1, Punkt 3

  
  
  
  
  
  
  • Kind der Liste 2, Punkt 1
  
  

  • Kind der Liste 2, Punkt 2

  
  
  
  

  Im Code -Snippet oben:

  • Der "
    "Element hat drei"
    • Elemente in IT als Kinderelemente auflisten. Der "
    • Elemente haben "HREF" -Tribute und die Listenelemente werden benannt.
    • Im gleichen "
      "Element, wir haben einen anderen angegeben"
      Element als nicht ordnungsgemäße Liste der untergeordneten Liste. Der einzige Unterschied ist, dass zwei der “
      • "Elemente haben"

        ”(Absatz) In den Listenelementelementen.

      • Das Kind der ersten ungeordneten Liste hat auch einen Listenelement ohne “

        "Und der andere mit"

        ”.

      Verwenden Sie ul li a … in HTML

      Wenn das "ul li a …”Wird im CSS -Stilelement ohne Symbol dazwischen hinzugefügt. Es bedeutet, dass es sich um einen Nachdickauswahl handelt. Die CSS -Eigenschaften implizieren in diesem Fall auf alle Elemente, ob sie direkte Kinderelemente der “sind“ul" Und "li" oder nicht:

      ul li a
      Farbe Rot;
      

      Die CSS -Eigenschaften implizieren in diesem Fall auf alle Kinderelemente:

      Verwenden Sie UL> li> A … in HTML

      Der "ul> li> a …Implementiert die CSS -Eigenschaften nur den direkten Kinderelementen. Zum Beispiel wird es nur die Elemente implizieren, die die UL Li und A und kein anderes Element dazwischen haben:

      ul> li> a
      Farbe blau;
      

      Infolgedessen wird die folgende Ausgabe erzeugt:

      Dies fasst den Unterschied zwischen den CSS zusammen “ul li a …" Und "ul> li> a …”.

      Abschluss

      Der "ul li a …Ist der CSS -Selektor, der zur Auswahl der ungeordneten Liste und zur Anwendung der Stileigenschaften auf die nicht ordnungsgemäßen Listenelemente und dann der untergeordneten Elemente usw. verwendet wird. Während "ul> li> a …”Wird verwendet, um die CSS -Eigenschaften nur dann auf der ungeordneten Liste anzuwenden, wenn die“li" Und "A"Sind das direkte Kind der"ulUnd dazwischen gibt es kein anderes Element.