CSS selectors ul li a {…} vs ul> li> a {…}

IL "ul li a …" E "ul> li> a …"Sono usati come i selettori CSS aggiunti nell'elemento in stile CSS per selezionare l'elenco non ordinato e i suoi elementi creati nel corpo HTML e quindi applicare le proprietà CSS su quell'elenco non ordinato.

In questo articolo, discuteremo della differenza tra il CSS "ul li a …" E "ul> li> a …"Selettori.

Scopo di usare "UL", "Li" e "A" in HTML

"ul"Sta per l'elenco non ordinato. Il suo scopo è quello di creare un elenco non ordinato nella forma proiettata. "li"Viene utilizzato per aggiungere un elemento dell'elenco. UN "<UN> ”(Tag di ancoraggio) viene utilizzato per aggiungere il collegamento ipertestuale. Supponiamo, abbiamo il seguente frammento di codice HTML per generare un elenco non ordinato:

• Elenco 1, voce 1


• Elenco 1, voce 2


• Elenco 1, voce 3


• 
  
  
  
  
  
  • Figlio dell'elenco 1, voce 1
  
  

  • Figlio dell'elenco 1, voce 2

  
  

  • Figlio dell'elenco 1, voce 3

  
  
  
  
  
  
  • Figlio dell'elenco 2, voce 1
  
  

  • Child of List 2, Articolo 2

  
  
  
  

  Nel frammento di codice sopra:

  • IL "
    "L'elemento ne ha tre"
    • "Elenca gli elementi in esso come elementi figlio. IL "
    • "Gli elementi hanno gli attributi" href "e gli elementi dell'elenco sono denominati.
    • Nello stesso "
      "Elemento, ne abbiamo specificati un altro"
      "Elemento come suo elenco non ordinato figlio. L'unica differenza è che due dei "
      • "Gli elementi hanno"

        "(Paragrafo) All'interno dell'elenco elementi elementi.

      • Il figlio del primo elenco non ordinato ha anche un elemento dell'elenco senza "

        "E l'altro con"

        ".

      Usando ul li a … in html

      Quando il "ul li a …"Viene aggiunto nell'elemento in stile CSS senza alcun simbolo tra loro, significa che è un selettore discendente. Le proprietà CSS, in questo caso, implicheranno tutti gli elementi se si tratta di elementi infantili diretti del "ul" E "li" o no:

      ul li a
      colore rosso;
      

      In questo caso le proprietà CSS implicheranno tutti gli elementi del bambino:

      Usando ul> li> a … in html

      IL "ul> li> a …"Implementa le proprietà CSS solo agli elementi del bambino diretto. Ad esempio, implicherà solo gli elementi che hanno tra loro l'ulli e un altro elemento:

      ul> li> a
      colore blu;
      

      Di conseguenza, verrà generato il seguente output:

      Questo riassume la differenza tra il CSS "ul li a …" E "ul> li> a …".

      Conclusione

      IL "ul li a …"È il selettore CSS utilizzato per selezionare l'elenco non ordinato e applicare le proprietà di stile agli elementi dell'elenco non ordinato del bambino e quindi i loro elementi figlio e così via. Mentre il "ul> li> a …"Viene utilizzato per applicare le proprietà CSS nell'elenco non ordinato solo quando il"li" E "UN"Sono il figlio diretto del"ul"E non c'è altro elemento in mezzo.