CSS si applicano a tutti i bambini
In questa guida, impareremo come applicare lo stile a tutti i bambini in CSS e usare alcuni esempi per comprendere questo concetto in dettaglio.
Sintassi:
elemento> elementoSelezionerà tutti i figli del particolare genitore.
div. class> *// Proprietà di CSS
Selezionerà i bambini in modo ricorsivo.
Esempio n. 1: selezione di tutti i bambini
Innanzitutto, creiamo il file HTML. Quindi, creiamo alcune classi "div" e "span" e scriviamo alcuni paragrafi all'interno di queste classi. Usiamo il selettore figlio in CSS e aggiungiamo un po 'di stile in modo che selezionino e applicherà quello stile a tutti i bambini. In questa guida, utilizziamo il codice Visual Studio per la dimostrazione di questi esempi. Creiamo questo file HTML in questo software e digitiamo il codice HTML. Devi digitare il seguente codice. IL ".L'estensione del file HTML ”viene utilizzata per salvare questo file.
Qui, abbiamo un tag "". In questo tag "", abbiamo due paragrafi che usano il "
". Quindi, arriva un tag "". Abbiamo un paragrafo all'interno di questo tag. Dopo il tag di chiusura di "", abbiamo anche altri due paragrafi in cui chiudiamo il tag "". Al di fuori di questo tag "Div", scriviamo un altro paragrafo. Questi paragrafi ti aiuteranno a comprendere il concetto di selezione e applicazione di tutti gli elementi in CSS.
Codice CSS:
Il codice CSS si riflette nella seguente immagine. Abbiamo collegato questo file CSS con il nostro file HTML. Tutto lo stile che abbiamo fatto qui è applicato al file HTML che abbiamo creato.
Qui, usiamo il "div> p" che seleziona tutti i paragrafi presenti all'interno del "div". Nelle parentesi graffe, utilizziamo le proprietà di stile come "colore di sfondo" che viene utilizzata per cambiare il colore di sfondo di tutti i bambini di quel genitore "Div". Lo impostiamo come "azzurro". Questo sfondo azzurro si applicherà a tutti i bambini. Cambiamo la "famiglia dei caratteri" di tutti i bambini usando la proprietà CSS e la imposta su "algerino". Questa proprietà si applicherà a tutti i bambini. Inoltre, utilizziamo la proprietà CSS "allineato al testo" e allineiamo il testo dei bambini al "centro".
Produzione:
È possibile ottenere facilmente l'output premendo "Alt+B". Rende il tuo output sul browser. Puoi facilmente vedere la differenza come seleziona tutti i bambini e applica lo stile a quei bambini.
Qui, vediamo che seleziona i primi due paragrafi e il quarto e il quinto paragrafo e applica lo stile a quei paragrafi. Non cambia lo stile del terzo e sesto paragrafi poiché non sono i figli del genitore "Div". Il terzo paragrafo è scritto nella "campata" ecco perché non è il figlio di "div". Il sesto paragrafo è scritto al di fuori del "div", quindi lo stile non viene applicato a questo paragrafo. Il selettore figlio seleziona solo il figlio del genitore menzionato nel codice CSS.
Esempio n. 2: selezione di tutti i bambini in modo ricorsivo
Per questo esempio, se il codice HTML è uguale al codice precedente, impostiamo il nome della classe Div come "AllChild" e utilizziamo questo nome nel codice CSS. Cambiamo il codice CSS e selezioniamo il figlio del genitore, in modo ricorsivo.
In questo esempio, cambiamo il colore "sfondo" dei bambini dell'elemento di classe Div. Qui, il "div.Allchilld> *"Seleziona tutti gli elementi della classe Div come figlio di quel" div ". Il "*" seleziona tutti i bambini della classe "Div" chiamata "AllChild". Cambia il colore di tutti i bambini della classe Div in "rosa"
Produzione:
Ecco l'output in cui abbiamo usato il "div.AllChild> *"selettore. Seleziona tutti i figli del genitore, in modo ricorsivo. Puoi vedere che cambia il colore di sfondo di tutti gli elementi della classe Div in un colore "rosa".
Esempio n. 3: selezione di tutti i bambini in CSS
In questo codice, utilizziamo il "" e . Nel "", abbiamo tre "" e il paragrafo "
"All'interno di questo paragrafo. Usiamo di nuovo il "" e quindi chiudiamo questo paragrafo usando "
". Chiudiamo il "div" e creiamo un altro campata presente al di fuori del "div".Codice CSS:
Il "display" della "span" è impostato su "Blocco". Usiamo il selettore figlio che seleziona tutti i figli del genitore. Viene usato qui per selezionare tutte le campate della classe Div, poiché "Span" è il figlio del genitore "Div". Seleziona tutti gli elementi di span del div e quindi applica lo styling a tutte le campate. Il colore di sfondo di tutte le campate è impostato su "verde chiaro". La "dimensione del carattere" di tutte le "span" è impostata su "35px". La "famiglia del carattere" per tutti questi è "Gill Sans". Il "font-peso" è impostato su "grassetto" e lo "stile" è impostato su "corsivo". Questo vale per tutti i bambini.
Produzione:
Applica lo stile a tutti i bambini che "spaziano" del genitore "Div". Poiché il paragrafo 1, 2 e 4 è scritto all'interno della "campata" nel "div", lo stile di questi tre paragrafi cambia. Significa che il selettore figlio seleziona l'intervallo del div e applica lo stile precedente a tutti questi bambini.
Esempio n. 4: selezione di tutti i bambini in modo ricorsivo
Creiamo la "Classe Div" con il nome "Child". Abbiamo due campate, e poi un paragrafo, e di nuovo un intervallo all'interno del div. Un paragrafo è scritto al di fuori del div. Ora selezioniamo gli elementi della classe Div in modo ricorsivo usando il selettore CSS.
Codice CSS:
Il "display" è "blocco". Quindi, abbiamo il "div.Selettore figlio> *"che seleziona tutti gli elementi della classe Div denominati" Child "usando il" *". Il "*" seleziona tutti gli elementi del bambino. Il "colore di sfondo" qui a tutti i bambini è il "salmone chiaro". Il colore del carattere è "blu-viola". La famiglia del carattere che usiamo qui è "Times New Roman". Usiamo anche il "weight di carattere" e lo impostiamo su "audace". La "dimensione del carattere" che utilizziamo è "25px". Ora, controlla come appare l'output.
I primi quattro paragrafi sono scritti all'interno della classe Div "Child" e tutto lo stile che abbiamo usato nell'esempio precedente del codice CSS viene applicato qui, come mostrato nell'immagine. Seleziona tutti gli elementi figlio della classe "bambino" di "div" e applica gli stili a quegli elementi.
Conclusione
Abbiamo usato il selettore figlio in questa guida e abbiamo spiegato come selezionare tutti i bambini in CSS. Abbiamo anche spiegato come applicare gli stili a tutti i figli del genitore selezionato. Abbiamo imparato come selezionare tutti i figli di un genitore selezionato e selezionare tutti i bambini in modo ricorsivo usando il selettore CSS Child. In questa guida, abbiamo esplorato quattro diversi esempi. Abbiamo eseguito tutti gli esempi e visualizzato questi codici e output in questa guida. Ci aspettiamo che imparerai questo concetto dopo aver letto attentamente questa guida e dopo aver eseguito questi esempi da solo.