Non sarà più il primo tag figlio. In questo caso, il primo elemento figlio sarà h2.
La stessa cosa accade con la regola p:last-child: lo stile CSS verrà applicato al tag
Qualsiasi altro tag di tipo diverso e vedrai che la regola p:last-child non sarà più applicata.
(questo è indicato dal numero 3 tra parentesi). Il colore del carattere per questo paragrafo diventa rosso. Puoi modificare il numero 3 (ad esempio, in 2) e vedere il risultato.
Le regole tr:nth-child(odd) e tr:nth-child(even) funzionano rispettivamente per gli elementi tr pari e dispari. Puoi vedere il risultato nello screenshot e anche copiare tutto il codice e sperimentare tu stesso gli stili.
/* CSS */ p:first-of-type ( colore: viola; trasformazione testo: maiuscolo; ) p:last-of-type ( stile carattere: corsivo; dimensione carattere: 0,8em; ) p:nth- di tipo(3) ( colore: rosso; ) p:nesimo di tipo(dispari) ( colore di sfondo: #A2DED0; ) p:nesimo di tipo(pari) ( colore di sfondo: #C8F7C5; ) h3:only-of-type ( decorazione del testo: sottolineatura; )
Schermata: applicazione di :first-of-type, :last-of-type, :nth-of-type e :only-of-type
La prima regola CSS che vedi è p:first-of-type . Che cosa fa? Seleziona un elemento figlio di tipo p which Primo trovato nel genitore. E non importa in quale posizione si trova questo tag tra elementi di altri tipi: primo, secondo o decimo. Questa è la differenza tra le pseudo-classi:first-child e:first-of-type.
La regola successiva - p:nth-of-type(3) - cambia il colore del carattere in rosso. Questo stile viene applicato al tag
. Ma se non prendiamo in considerazione elementi di altro tipo, risulta che il tag
Con il carattere rosso è al terzo posto (tra i tag della sua tipologia). Ecco come funziona questa regola.
Le regole p:nth-of-type(even) e p:nth-of-type(odd) funzionano in modo simile: poiché il nome p è dato prima dei due punti, i figli pari e dispari di tipo p vengono selezionati e dipinti nel dati i colori. Gli elementi rimanenti vengono saltati.
L'ultima regola - h3:only-of-type - si applica al contenuto del tag
, sottolineando il testo. Questo stile funziona solo perché il tag È l'unico elemento figlio del suo tipo. Se aggiungi un altro tag al codice HTML , lo stile non verrà applicato.
conclusioni
Il selettore figlio CSS ti consente di modificare lo stile di un elemento figlio di un documento HTML in base a chi è il suo genitore.
Usando pseudo-classi aggiuntive: first-child, :last-child, :nth-child, :only-child, puoi dare uno stile agli elementi figli di un documento HTML, concentrandoti sulla loro posizione e numerazione nell'albero degli elementi.
Pseudo-classi: first-of-type, :last-of-type, :nth-of-type, :only-of-type ti consentono di applicare lo stile anche agli elementi figlio di un documento HTML, in base al loro tipo come numerazione nell'albero degli elementi.
Gli elementi figlio sono elementi che si trovano direttamente all'interno di un elemento genitore. Notare le parole: direttamente all'interno.
Diamo un'occhiata ad un esempio di semplice codice html:
Elementi figli.
Il paragrafo e in esso Grasso elemento, ed eccolo qui inclinato elemento.
Qui Grasso E sottolineato e obliquo elementi.
Questo codice ha due paragrafi. Ci sono elementi in linea all'interno dei paragrafi
, E . Nel secondo paragrafo il tag nidificato in un tag
.
Ora aggiungiamo gli stili CSS a questo codice html utilizzando i selettori secondari.
Sintassi per i selettori figlio:
Selettore 1 > Selettore 2 ( Proprietà: valore; )
Ecco il codice aggiornato:
Elementi figli.
Il paragrafo e in esso Grasso elemento, ed eccolo qui inclinato elemento.
Qui Grasso E sottolineato e obliquo elementi.
Quindi, ricordiamolo: un elemento figlio è un elemento nidificato direttamente nel genitore. Cioè, un elemento figlio è un discendente di primo livello. Prestiamo attenzione al tag , nel primo paragrafo è annidato in un tag
E nel secondo è annidato in un tag , sebbene sia anch'esso figlio del tag
Pertanto, nel secondo paragrafo, la regola CSS per il selettore figlio p>i ( color : blue ; ) non funzionerà: il testo in corsivo del secondo paragrafo non verrà visualizzato in blu.
Figura 1. Esempio n. 1 al lavoro.
Vai all'elemento html il secondo paragrafo può essere utilizzato utilizzando la regola CSS: p>u>i ( color : blue ; ).
Usiamo questa regola per impostare il testo in corsivo del secondo paragrafo in giallo.
Elementi figli.
Il paragrafo e in esso Grasso elemento, ed eccolo qui inclinato elemento.
Qui Grasso E sottolineato e obliquo elementi.
Questo stile funzionerà e il testo in corsivo nel secondo paragrafo verrà visualizzato in giallo.
Figura 2. Esempio n. 2 in azione.
Esempio più complesso
Abbiamo il codice html:
Elementi figli.
Per impostazione predefinita viene interpretato in questo modo:
Sfida: utilizzando i CSS, trasforma questo elenco in un menu orizzontale.
Figura 3. Obiettivo del cambiamento.
Ecco una soluzione a questo problema utilizzando i selettori secondari:
Elementi figli.
Per una migliore comprensione di questo esempio, continua a leggere.
Vlad Merzhevich
Un elemento figlio è un elemento che si trova direttamente all'interno di un elemento genitore. Per comprendere meglio le relazioni tra gli elementi del documento, diamo un'occhiata a un piccolo codice (esempio 12.1).
Esempio 12.1. Nidificazione di elementi in un documento
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
In questo esempio vengono utilizzati più contenitori che si trovano uno dentro l'altro nel codice. Ciò può essere visto più chiaramente nell'albero degli elementi, che è il nome dato alla struttura delle relazioni tra i tag del documento (Fig. 12.1).
Riso. 12.1. Esempio di albero degli elementi
Nella fig. La Figura 12.1 presenta la nidificazione degli elementi e la loro gerarchia in una forma conveniente. Ecco l'elemento figlio del tag
sporge l'etichetta
Tuttavia, l'etichetta non è un figlio del tag , poiché si trova in un contenitore
Torniamo ora ai selettori. Un selettore figlio è quello che si trova direttamente all'interno dell'elemento genitore nell'albero degli elementi. La sintassi per l'utilizzo di tali selettori è la seguente.
Selettore 1 > Selettore 2 (Descrizione regole di stile)
Lo stile viene applicato al Selettore 2, ma solo se è figlio del Selettore 1.
Facendo riferimento all'Esempio 12.1, lo stile di vista P > EM ( color: red ) verrebbe impostato sul primo paragrafo del documento perché il tag è all'interno del contenitore E non darà alcun risultato per il secondo paragrafo. E tutto perché il tag nel secondo paragrafo si trova in un contenitore , quindi la condizione di nidificazione è violata.
Nella loro logica, i selettori figli sono simili ai selettori di contesto. La differenza tra loro è la seguente. Un selettore figlio ha uno stile solo se è un figlio diretto, ovvero direttamente all'interno dell'elemento genitore. Per un selettore di contesto, è consentito qualsiasi livello di annidamento. Per rendere più chiaro di cosa stiamo parlando, diamo un'occhiata al codice seguente (esempio 12.2).
Esempio 12.2. Selettori contestuali e figli
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selettori bambini
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna Aliguam erat volutpat.
Il risultato di questo esempio è mostrato in Fig. 12.2.
Riso. 12.2. Colore del testo impostato utilizzando un selettore figlio
Taggare Nell'esempio operano contemporaneamente due regole: selettore di contesto (tag situato all'interno ) e il selettore figlio (tag
è una filiale di ). In questo caso, le regole sono equivalenti, poiché tutte le condizioni sono soddisfatte e non si contraddicono a vicenda. In questi casi viene applicato lo stile mostrato nel codice seguente, quindi il testo in corsivo appare in rosso. Se inverti le regole e metti DIV I sotto, il colore del testo cambierà da rosso a verde.
Tieni presente che nella maggior parte dei casi puoi evitare di aggiungere selettori secondari sostituendoli con selettori di contesto. Tuttavia, l'uso dei selettori secondari espande la capacità di controllare gli stili degli elementi, consentendo in definitiva di ottenere il risultato desiderato, oltre a un codice semplice e chiaro.
È più conveniente utilizzare questi selettori per elementi che hanno una struttura gerarchica, inclusi, ad esempio, tabelle e vari elenchi. L'Esempio 12.3 mostra come modificare l'aspetto di una lista utilizzando gli stili. Annidando un elenco in un altro otteniamo un tipo di menu. In questo caso, i titoli si trovano orizzontalmente e l'insieme dei collegamenti si trova verticalmente sotto i titoli (Fig. 12.3).
Riso. 12.3. Elenco come menu
Per posizionare il testo orizzontalmente, la proprietà dello stile float viene aggiunta al selettore LI. Per separare lo stile di una lista orizzontale e verticale, vengono utilizzati selettori figli (esempio 12.3).
Esempio 12.3. Utilizzo dei selettori figlio
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selettori bambini
In questo esempio, i selettori secondari devono separare lo stile degli elementi dell'elenco di livello superiore e degli elenchi nidificati, che servono a scopi diversi, quindi il loro stile non dovrebbe sovrapporsi.
Domande da verificare
1. Di che colore sarà il testo in grassetto corsivo nel codice?
Si basano gli standard di illuminazione sulla base della classificazione del lavoro visivo secondo determinate caratteristiche quantitative.
Quando si utilizza il seguente stile?
P (colore: verde;)
B (colore: blu;)
Io (colore: arancione; )
B > I (colore: oliva;)
P > I (colore: giallo;)
- Verde.
- Blu.
- Arancia.
- Oliva.
- Giallo.
2. Quale elemento è l'elemento genitore del tag ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Per quale tag è l'elemento<!DOCTYPE>agisce come genitore?</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Non per nessun tag.</li>
</ol><h2>Risposte</h2>
<p>1. Oliva.</p>
<p>3. Non per nessun tag.</p>
<p>I selettori figlio CSS sono selettori utilizzati per applicare stili agli elementi solo quando sono figli di altri elementi (genitori). Come i selettori discendenti, i selettori figli sono composti e sono costituiti da selettori semplici (classi, identificatori, ecc.).</p>
<p>E ancora, se hai dimenticato cosa sono gli elementi figli, allora ricordiamolo guardando un esempio che ti è già familiare.</p><p>
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
</p><p>Un elemento si dice figlio di un altro elemento se è al primo livello di nidificazione al suo interno. Nel nostro esempio<тег2>E<тег3>sono figlie<тег1>, UN<тег4>- questa è mia figlia<тег3>
.</p>
<p>I selettori figli sono costituiti da due o più selettori semplici separati da un segno ">", dove viene specificato prima il genitore, poi il figlio, poi il figlio di quel figlio e così via. Cioè, come nei selettori discendenti, viene specificato il percorso attraverso l'albero del documento. Gli stili verranno applicati solo a quegli elementi i cui selettori sono gli ultimi nell'elenco. Sintassi generale:</p>
<p>selettore1 > selettore2 (</p>
<p>Gli spazi su entrambi i lati del segno ">" possono essere posizionati o meno, a piacere.</p>
<p>Esempio di utilizzo dei selettori figlio CSS</p><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Selettori bambini
Risultato nel browser
Paragrafo 1.
Paragrafo 2.
Ci sono due cose a cui devi prestare attenzione in questo esempio. Ci sono tre elementi qui, ma solo due di essi hanno bordi, riempimento e margini. Perché? E il secondo punto. Solo il primo paragrafo ha il testo blu.
Internet Explorer 6.0 non supporta i selettori secondari, quindi se stai creando il tuo sito pensando a questo browser più vecchio, tienilo a mente.
Selettori figlio nelle tabelle HTML
Molti principianti (e talvolta non principianti) nella creazione di siti Web incontrano alcuni problemi quando utilizzano i selettori secondari nelle tabelle HTML. Per capire di cosa stiamo parlando, diamo un'occhiata a un tavolo così normale.
| Cella 1.1 | Cella 1.2 |
| Cella 2.1 | Cella 2.2 |
E ora la domanda. Cosa faresti se avessi bisogno di utilizzare selettori secondari per passare da un tag alle celle? Se decidi di scrivere in questo modo, allora è errato:
tabella > tr > td ( costo dell'immobile; costo dell'immobile; ...)
Riesci a indovinare perché è sbagliato? NO? Il fatto è che ti sei dimenticato di un altro elemento che, anche se non specificato esplicitamente, è comunque presente in modo invisibile in ogni tabella HTML. Semplicemente non ha i tag di apertura e chiusura richiesti, quindi spesso viene dimenticato. A proposito, sì, dentro Esercitazione sull'HTML Non l’abbiamo esaminata, perché in realtà la sua indicazione esplicita raramente serve. Bene, penso che tu abbia già indovinato quale sarà la voce corretta, ma te lo mostrerò comunque.
tabella > tcorpo > tr > td ( costo dell'immobile; costo dell'immobile; ...)
A proposito, non solo le tabelle hanno elementi con tag di apertura opzionali, ma esistono anche elementi simili. È solo che in pratica i "problemi di dimenticanza" sorgono più spesso con le tabelle, motivo per cui ho attirato la vostra attenzione su questo.
Compiti a casa.
- Imposta la pagina sulla dimensione del carattere Arial 0,9 em e uno sfondo.
- Scrivi diversi titoli e paragrafi sulla pagina, modifica la dimensione e il colore del testo del titolo come ritieni opportuno.
- Assicurati che i collegamenti direttamente nei paragrafi della pagina siano blu senza sottolineature. Ma allo stesso tempo, se i collegamenti sono inoltre incorniciati da qualsiasi tag, ad esempio in corsivo, dovrebbero essere visualizzati con una sottolineatura e in rosso. Ancora una volta, attiro la tua attenzione sul fatto che non è necessario specificare separatamente gli stili di collegamento con ciascun tag di inquadratura, renderlo universale. Come? Pensaci.
- Crea un piccolo menu sul lato destro della pagina e aggiustalo, per questo avrai bisogno di una proprietà e di un paio di altre proprietà che la accompagnino, lo capirai lì. Allo stesso tempo, lascia che il menu non solo rimanga al suo posto all'interno della finestra del browser, ma non si insinui anche nel contenuto della pagina durante lo scorrimento.
Penso che l'ultimo punto della lezione sarà il più difficile per te, ma non cercare di immergerti completamente subito nella padronanza del posizionamento. Fai solo i compiti. A proposito, questo elemento non funzionerà in Internet Explorer 6.0, poiché il vecchio non capisce il posizionamento fisso.
I migliori articoli sull'argomento
