CSS Only-Child
Esempio 01:
Avriamo il file del codice HTML all'interno del codice Visual Studio con il tag di apertura principale HTML seguito dall'apertura di un tag principale adiacente all'apertura del tag del titolo. Questo tag del titolo contiene il titolo per questa pagina e il tag del titolo è chiuso qui. Quindi, abbiamo un tag in stile CSS principale e il tag del corpo per aggiungere elementi alla pagina HTML insieme ad un po 'di stile. Dobbiamo prima comprendere il corpo dell'HTML. Per questo, utilizziamo una semplice intestazione delle dimensioni più grandi nella parte superiore della pagina HTML, i.e. H1, dimostrando che questo è un esempio di offset di classe solo per bambini. Quindi, utilizziamo il semplice elemento "div" per creare una nuova divisione sulla pagina web HTML seguita dal suo tag figlio, i.e. etichetta. Questo tag dell'etichetta utilizza una semplice frase in esso.
Ora, l'elemento "etichetta" è l'unico tag all'interno del tag "div". In questo caso sarebbe stato preso come offset di unico figlio. Abbiamo un altro elemento Div usato dopo questo all'interno della pagina HTML. Questo elemento div contiene altri due tag o elementi al suo interno. Il suo primo tag è il tag di span e l'altro è il tag dell'etichetta; Entrambi contengono alcuni dati di testo in esso. Dal momento che questo tag Div ha due figli, non un figlio singolo sarebbe preso come offset "solo-figlio" per lo stile. Infine, abbiamo un nuovo tag di paragrafo con il suo unico tag bambino "etichetta" al suo interno. Ora, questo tag etichetta dell'elemento di paragrafo sarebbe anche preso come l'unico figlio del suo genitore e disegnato di conseguenza. L'elemento corpore è completato qui.
Prendiamo una maschera al design di questa pagina HTML. All'interno del tag CSS di stile, utilizziamo l'elemento "etichetta" con il "solo bambino" di classe per applicare alcuni stili a tutti gli elementi figlio di tag/elementi particolari che non contengono nessun altro figlio al loro interno. In altre parole, lo stile viene applicato agli elementi del bambino che non hanno fratelli. Usiamo lo sfondo della proprietà per aggiungere lo sfondo del colore verde per questo particolare bambino. La proprietà della famiglia del carattere contiene più di 1 valore per il testo contenuto dal bambino particolare e la sua dimensione del carattere è extra grande. Il colore per il testo di "etichetta" etichette per bambini è rosa chiaro secondo il colore della proprietà. Il tag di stile accanto all'elemento tag di testa è completato. Chiudiamo il tag HTML dopo il tag del corpo e salviamo questo codice. Prova a eseguirlo con il browser Chrome per vedere l'output per l'offset della classe unica bambino.
La seguente uscita visualizzata mostra una semplice intestazione in alto seguita dalle due sezioni "div" e un paragrafo. Le sezioni visualizzate nello sfondo di colore verde dimostrano l'unico bambino della sezione "div", quindi disegnati di conseguenza tramite l'offset di unico figlio per l'elemento dell'etichetta. La linea dopo il primo elemento figlio rappresenta la seconda sezione "div" con due bambini, span ed etichetta, sulla stessa linea. Mentre il secondo bambino in stile in sfondo verde fa parte di un elemento di paragrafo.
Esempio 02:
Iniziamo questo script HTML con lo stesso formato HTML di codici: inizia con il tag HTML seguito dal tag di testa, dal tag del corpo, dall'apertura e dalla chiusura. Il corpo dell'HTML contiene una voce di dimensione 1, la testa più grande dell'HTML. Iniziamo un elenco ordinato all'interno del nostro tag corporeo HTML. Questo elemento elenco viene aggiunto con il tag elenco "ol". Questo elenco ordinato contiene un totale di 4 elementi elenchi numerati all'interno di esso tramite l'uso dei tag dell'elenco "LI". Il primo elenco numerato contiene un singolo elenco non ordinato al suo interno con un singolo elemento elenco che viene preso come unico bambino. Il secondo elenco elenco dell'elenco ordinato principale contiene un altro elenco non ordinato al suo interno. Questo elenco interiore non ordinato contiene tre elenchi al suo interno con l'uso dei tag "LI". La terza elemento elenco dell'elenco ordinato principale contiene un singolo elemento elenco al suo interno con il tag dell'elenco non ordinato interiore seguito dal tag "LI".
L'ultimo elenco elenco dell'elenco ordinato principale contiene un altro elemento dell'elenco non ordinato, "UL". Questo elemento dell'elenco non ordinato contiene un totale di tre elementi elenchi al suo interno utilizzando i tag "LI". Il principale ordinato viene chiuso dopo l'uso di tutti e 4 gli elementi dell'elenco principale in esso. Il corpo della nostra pagina HTML è completato qui.
Diamo un'occhiata al design di tutta questa pagina HTML. Utilizziamo i due tag delle parole chiave "LI" all'interno del tag di stile per modellare tutti gli elementi dell'elenco interno degli elementi dell'elenco principali principali. La proprietà di tipo elenco per quegli elementi della lista interna è specificata come uno stile "cerchio". D'altra parte, utilizziamo l'unica classe di offset per il bambino per gli elementi dell'elenco per aggiungere alcuni stili agli unici elementi elementi che sono l'unico bambino del loro rispettivo genitore e non hanno nessun altro figlio o fratello. Specifichiamo il colore del testo per quegli elementi dell'elenco dei figli come rosso con diversi usi della famiglia. Inoltre, utilizziamo il tipo di stile dell'elenco Square tramite l'uso del tipo "Elenco in stile". Lo stile per questo codice è finalizzato. Salviamo ed eseguiamo il nostro codice per vedere l'output.
L'output per questo codice mostra una singola intestazione seguita dall'elenco ordinato di 4 elementi di elenco numerati. Gli elementi di elenco non ordinati singoli di questi elementi di elenco ordinati sono evidenziati nel colore del testo rosso con il proiettile dello stile dell'elenco quadrato. Il resto degli elementi dell'elenco non ordinato sono visualizzati nello stile del proiettile del cerchio.
Conclusione
Questo articolo ha segnato il segno per dimostrare l'uso della classe di offset di unica figlio nello stile CSS per modellare gli unici elementi di una pagina HTML che sono un singolo figlio dell'elemento genitore. A tale scopo, abbiamo utilizzato un totale di 2 brevi esempi nella nostra sceneggiatura HTML per dimostrare l'applicazione di questa classe di offset a tali elementi figlio. Il primo esempio contiene l'uso di questo offset in alcune sezioni "div" mentre l'altro esempio lo utilizza per modellare gli elementi dell'elenco non ordinato per un elenco numerato.