¿Que é un selector de descendente de CSS?

A estrutura dun documento HTML é semellante a unha árbore genealógica. Na túa familia, tes os teus pais e outros que viñeron antes. Estes son os teus antepasados. Os fillos e os que veñen detrás de ti nesa árbore son os teus descendentes. O HTML funciona de forma similar. Elementos que están dentro doutros elementos son os seus descendentes. Por exemplo, dado que case todos os elementos HTML están dentro de etiquetas , eles serían descendentes dos elementos . Esta relación é importante para entender cando comeza a traballar co CSS e necesitamos segmentar determinados elementos para aplicar estilos visuais.

Selector de descendente CSS

Un selector descendente CSS aplícase aos elementos que están dentro doutro elemento (ou máis precisamente, un elemento que é descendente doutro elemento). Por exemplo, unha lista desordenada ten unha etiqueta con etiquetas como descendentes. Usemos o seguinte HTML como exemplo:

• esta é unha ligazón

  As etiquetas LI son descendentes da etiqueta UL. A etiqueta A é descendente das etiquetas LI (descendente infantil) e UL (descendencia do nacemento). Se pensa pensar nisto usando o exemplo de árbore genealógico, o

  sería o pai, o
  • sería o fillo do elemento, eo sería o fillo do
  • eo neto de o
    .

    Entón, como abordarías elementos específicos nunha páxina web usando estes selectores descendentes? Primeiro, ten que definir selectores descendentes usando dous (ou máis) selectores de tipo separados por espazos.

    que a {text-decoration: none; }

    Nese exemplo, os estilos só se aplican a un elemento de ligazón () que é un descendente dun elemento de elemento de lista (

    • ). Todas as outras ligazóns que non sexan descendentes dun elemento de lista non recibirían este estilo.

      Unha cousa importante a recordar é que non importa cantas etiquetas están entre as etiquetas que pode usar no selector descendente. Se o segundo elemento está en calquera lugar dentro do primeiro elemento, será seleccionado como descendente.

      Se desexa seleccionar todas as áncoras que descenden dos elementos ul, escreberas:

      ul a {text-decoration: none; }

      Agora, estes estilos aplicaranse a calquera ligazón que sexa un descendente dun elemento da lista. Tamén podes escribir este selector

      ul li a {text-decoration: none; }

      Este é un selector descendente que usa máis de dous selectores de tipo. Neste caso, isto aplicaría ás ligazóns que están dentro de como elemento de lista e tamén dentro dunha lista desordenada.

      Usando selectores de clase e selectores de ID

      Os selectores que baixas non deben ser sempre descendentes de tipos. Por exemplo, imaxine que tiña unha área do sitio (como unha división) cun atributo ID de "cartelera". Poderá configurar un selector descendente desa ID:

      #billboard ul {background-color: #ccc; }

      Isto estilizaría a lista desordenada que é un descendiente dun elemento cunha ID de "cartelera". Podes facer o mesmo para os valores de clase.

      div.billboard ul {background-color: #ccc; }

      Isto supón que a división ten un valor de clase de "cartelera". O CSS anterior estilizaría o elemento

      dentro de calquera división que teña este valor de clase.

      Pode ser moi pesado e detallado con selectores descendentes. Por exemplo, se usa Dreamweaver para escribir o seu código HTML , hai unha configuración cando engade novas regras CSS que crearán automáticamente o selector en función da colocación do cursor nesa páxina. O que fai Dreamweaver nestes casos é crear un selector descoidado e longa e descendente. Esta moita especificidade non é necesaria para que o teu CSS funcione. O que queres facer é atopar un equilibrio entre un selector descendente que sexa o suficientemente específico para que podes abaixar os elementos exactos que necesites (sen deseñar os que non queres afectar) sen ter regras CSS que teñan selectores que son excesivamente grande.