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

O "ul li a …" e "ul> li> a …”São usados ​​como seletores CSS adicionados no elemento de estilo CSS para selecionar a lista não ordenada e seus itens criados no corpo HTML e, em seguida, aplicar propriedades CSS nessa lista não ordenada.

Neste artigo, discutiremos a diferença entre o CSS “ul li a …" e "ul> li> a …”Seletores.

Objetivo de usar "UL", "Li" e "A" em HTML

““ul”Significa lista não ordenada. Seu objetivo é criar uma lista não ordenada na saída na forma de marcadores. ““li”É usado para adicionar um item de lista. Um "<a> ”(Tag âncora) é usado para adicionar o link de hipertexto. Suponhamos que tenhamos o seguinte snippet de código HTML para gerar uma lista não ordenada:

• Lista 1, Item 1


• Lista 1, Item 2


• Lista 1, Item 3


• 
  
  
  
  
  
  • Filho da lista 1, item 1
  
  

  • Filho da Lista 1, Item 2

  
  

  • Filho da lista 1, item 3

  
  
  
  
  
  
  • Filho da lista 2, item 1
  
  

  • Filho da lista 2, item 2

  
  
  
  

  No trecho de código acima:

  • O "
    ”Elemento tem três“
    • ”Liste os itens nele como elementos filhos. O "
    • Os elementos têm atributos “href” e os itens da lista são nomeados.
    • No mesmo "
      ”Elemento, especificamos outro“
      ”Elemento como sua lista não ordenada infantil. A única diferença é que dois dos “
      • ”Os elementos têm“

        ”(Parágrafo) dentro dos elementos do item da lista.

      • O filho da primeira lista não ordenada também possui um item de lista sem “

        "E o outro com"

        ”.

      Usando ul li a … em html

      Quando o "ul li a …”É adicionado no elemento de estilo CSS sem símbolo entre eles, significa que é um seletor descendente. As propriedades do CSS, neste caso, implicarão em todos os elementos, sejam eles elementos diretos da criança do “ul" e "li" ou não:

      ul li a
      cor vermelha;
      

      As propriedades do CSS implicarão em todos os elementos infantis neste caso:

      Usando Ul> Li> A … em HTML

      O "ul> li> a …”Implementa as propriedades do CSS apenas para os elementos diretos da criança. Por exemplo, isso implicará apenas os elementos que têm o Ul Li e A e nenhum outro elemento entre eles:

      ul> li> a
      cor azul;
      

      Como resultado, a seguinte saída será gerada:

      Isso resume a diferença entre o CSS “ul li a …" e "ul> li> a …”.

      Conclusão

      O "ul li a …”É o seletor de CSS usado para selecionar a lista não ordenada e aplicar as propriedades de estilo aos elementos da lista não ordenada infantil e depois a seus elementos filhos e assim por diante. Enquanto o "ul> li> a …”É utilizado para aplicar as propriedades CSS na lista não ordenada apenas quando“li" e "a”São o filho direto do“ul”E não há outro elemento entre.