Capire CSS selettori discendenti può aiutarti a indirizzare le regole di stile per un'area precisa del vostro disegno.

istruzione

E 'tutto nella sintassi CSS

1

Una pagina web è organizzata in una gerarchia. La gerarchia documento inizia con html e scende attraverso una struttura ad albero che potrebbe includere molti elementi all'interno del corpo. Ecco un semplice diagramma ad albero.

2 Nella struttura del documento, gli elementi discendono dall'elemento genitore che li racchiude. Nell'esempio, ci sono liste che sono gli elementi discendenti di entrambi div contenuto o la div barra laterale. Inoltre, le liste sono gli antenati di un elemento A (un collegamento ipertestuale).

3 La sintassi CSS per un selettore discendente è quello di elencare i selettori separati da uno spazio, (ma non una virgola). Per esempio:

#content ul {una regola qui}

Questo selettore rivolge un elemento A che è contenuto all'interno di un elemento UL che è contenuto all'interno del div CONTENUTO. Altri elementi A sulla pagina, forse uno in un paragrafo o nel div barra laterale, non sarebbero interessate da questo selettore.

4 Per lo stile un elenco o elemento della lista nella barra laterale, utilizzare un selettore discendente come questo:

#sidebar ul {} regola qui

o

#sidebar li {governare qui}

Per lo stile un collegamento ipertestuale nella barra laterale che non è annidato in un elenco, utilizzare selettori come questo:

#sidebar a: link {} regola qui
#sidebar a: visited {regola qui}

5 Per rendere gli elementi P apparire in modo diverso nell'area dei contenuti e l'area della barra laterale, utilizzare selettori discendenti come questo:

#content p {governare qui}
#sidebar p {governare qui}

6 selettori discendenti possono anche essere basati con le classi. Ad esempio, se ogni post sul tuo blog è stato assegnato alla classe "blogpost" si potrebbe scrivere un selettore discendente di un elemento em (sottolineato) in un elemento h3 che faceva parte di un div nella blogpost classe come questa:

h3.blogpost em {regola qui}

7 selettori discendenti possono diventare molto lunghi quando si prendono di mira un elemento molto specifico su una pagina complessa. Per esempio:

#blogpost blockquote p em {regola qui}

E 'la capacità di ottenere completamente concentrato su uno e un solo elemento in una pagina utilizzando i selettori discendenti che ti danno la forza per lo stile della pagina in qualsiasi modo si desidera.

Consigli e avvertenze

• Utilizzando selettori discendenti in grado di eliminare la necessità di assegnare un sacco di classi di elementi della pagina. Per esempio, si potrebbe fare una regola CSS per una classe chiamata .sidetext e assegnare tale classe per ogni paragrafo individuo si mette in una barra laterale. Tuttavia, si potrebbe eliminare ogni uno di quei compiti in classe in HTML utilizzando una singola regola per il selettore #sidebar p.