CSS SELECTORS UL LI A {…} VS UL> Li> A {…}

I denne artikkelen vil vi diskutere forskjellen mellom CSS “ul li a …”Og“ul> li> a …”Selectors.

Formålet med å bruke “UL”, “Li” og “A” i HTML

“ul”Står for uordnet liste. Hensikten er å lage en uordnet liste i utdataene i bulletformen. “li”Brukes til å legge til et listeelement. En "<en> ”(Anchor Tag) brukes til å legge til hypertekstlenken. La oss anta, vi har følgende HTML -kodeutdrag for å generere en uordnet liste:

• Liste 1, punkt 1


• Liste 1, punkt 2


• Liste 1, punkt 3


• 
  
  
  
  
  
  • Barn av liste 1, punkt 1
  
  

  • Barn av liste 1, punkt 2

  
  

  • Barn av liste 1, punkt 3

  
  
  
  
  
  
  • Barn av liste 2, punkt 1
  
  

  • Barn av liste 2, punkt 2

  
  
  
  

  I kodebiten over:

  • “
    ”Element har tre“
    • ”Liste elementer i det som barnelementer. “
    • ”Elementer har“ Href ”-attributter, og listeelementene blir navngitt.
    • I den samme "
      ”Element, vi har spesifisert en annen”
      ”Element som dets uordnede liste. Den eneste forskjellen er at to av “
      • ”Elementer har“

        ”(Avsnitt) Inne i listeelementene.

      • Barnet på den første uordnede listen har også ett listeartikkel uten "

        ”Og den andre med“

        ”.

      Bruker ul li a … i html

      Når “ul li a …”Er lagt til i CSS -stilelementet uten symbol i mellom dem, det betyr at det er en etterkommervelger. CSS -egenskapene vil i dette tilfellet innebære alle elementene om de er direkte barneelementer i "ul”Og“li" eller ikke:

      ul li a
      fargen rød;
      

      CSS -egenskapene vil innebære alle barneelementene i dette tilfellet:

      Bruker ul> li> a … i html

      “ul> li> a …”Implementerer CSS -egenskapene til bare de direkte barneelementene. For eksempel vil det innebære bare elementene som har UL LI og A og ingen andre elementer mellom dem:

      ul> li> a
      Farge: blå;
      

      Som et resultat vil følgende utgang bli generert:

      Dette oppsummerer forskjellen mellom CSS “ul li a …”Og“ul> li> a …”.

      Konklusjon

      “ul li a …”Er CSS -velgeren som brukes til å velge den uordnede listen og for å bruke stilegenskapene på barnet uordnede listeelementer og deretter deres barnelementer og så videre. Mens "ul> li> a …”Brukes til å bruke CSS -egenskapene på den uordnede listen bare når“li”Og“en”Er det direkte barnet til“ul”Og det er ikke noe annet element i mellom.