Selektory CSS ul li a {…} vs Ul> li> a {…}

„„ul li a …" I "UL> li> a …”Są używane jako selektory CSS dodane w elemencie stylu CSS, aby wybrać listę nieo uporządkowaną i jej elementy utworzone w korpusie HTML, a następnie zastosować właściwości CSS na tej nieuporządkowanej listy.

W tym artykule omówimy różnicę między CSS ”ul li a …" I "UL> li> a …”Selektory.

Cel użycia „ul”, „li” i „a” w HTML

"ul”Oznacza listę nieuporządkowaną. Jego celem jest utworzenie nieuporządkowanej listy w wyjściu w formie pocisku. "Li”Służy do dodania elementu listy. Jakiś "<A> ”(Tag Anchor) służy do dodania linku hipertekstowego. Załóżmy, że mamy następujący fragment kodu HTML, aby wygenerować nieoporządkowaną listę:

• Lista 1, pozycja 1


• Lista 1, pozycja 2


• Lista 1, pozycja 3


• 
  
  
  
  
  
  • Dziecko listy 1, pozycja 1
  
  

  • Dziecko listy 1, pozycja 2

  
  

  • Dziecko listy 1, pozycja 3

  
  
  
  
  
  
  • Dziecko listy 2, pozycja 1
  
  

  • Dziecko z listy 2, pozycja 2

  
  
  
  

  W powyższym fragmencie kodu:

  • „„
    ”Element ma trzy„
    • ”Wymień w nim elementy jako elementy dziecięce. „„
    • „Elementy mają atrybuty„ HREF ”, a elementy listy są wymienione.
    • W tym samym "
      „Element, określiliśmy inny„
      „Element jako lista nieuporządkowanych dzieci. Jedyną różnicą jest to, że dwie z „
      • „Elementy mają”

        ”(Akapit) Wewnątrz listy elementów elementów.

      • Dziecko z pierwszej listy nie zamówionej ma również jeden element listy bez „

        ”A drugi z„

        ".

      Używając ul li a … w html

      Kiedy "ul li a …”Jest dodawany do elementu stylu CSS bez symbolu między nimi, oznacza to, że jest to wybitny selektor. W tym przypadku właściwości CSS będą oznaczać wszystkie elementy, czy są to bezpośrednie elementy dziecięce „ul" I "Li" albo nie:

      ul li a
      kolor czerwony;
      

      W tym przypadku właściwości CSS będą oznaczać wszystkie elementy dziecięce:

      Używając UL> Li> A … w HTML

      „„UL> li> a …”Wdraża właściwości CSS tylko do bezpośrednich elementów dziecka. Na przykład będzie to oznaczać tylko elementy, które mają UL Li i A i nie ma między nimi innego elementu:

      Ul> li> a
      kolor niebieski;
      

      W rezultacie zostanie wygenerowane następujące dane wyjściowe:

      To podsumowuje różnicę między CSS ”ul li a …" I "UL> li> a …".

      Wniosek

      „„ul li a …”To selektor CSS używany do wyboru listy nieopisanej i do zastosowania właściwości stylu do dzieci nieuporządkowanych elementów listy, a następnie elementów dziecka i tak dalej. Podczas "UL> li> a …”Jest wykorzystywany do zastosowania właściwości CSS na liście nieopisanej tylko wtedy, gdy„Li" I "A”Jest bezpośrednim dzieckiem„ul”I nie ma innego elementu pomiędzy.