'. In tali casi il “ :ha() ” Viene utilizzata la pseudo-classe del selettore genitore.
Questo post descriverà:
- Come definire lo stile di un elemento padre specificando i suoi elementi figlio?
- Come selezionare tutti gli elementi figlio?
- Come selezionare tutti gli elementi figli diretti?
Come definire lo stile di un elemento padre specificando i suoi elementi figlio?
Innanzitutto, crea un file HTML con due elementi 'div' come segue:
- Aggiungi due ' ” elementi con la stessa classe “ genitore-div ”.
- Il primo contiene due “ ' elementi.
- Il secondo elemento '
' contiene ' ' e ' ”: < div classe = 'genitore-div' >
< p > Ciao < / p >
< p > mondo < / p >
< / div >
< div classe = 'genitore-div' >
< h1 > Ciao < / h1 >
< p > Ho il tag 'h1'. < / p >
< / div >Se è richiesto lo stile dell'elemento '
' con ' ', quindi possiamo regolare lo stile dell'elemento genitore tenendo premuto il figlio. A tale scopo, possiamo utilizzare il ' :ha() ” selettore.
Da entrambi gli elementi '
', selezionare quello che contiene l'elemento '' utilizzando ' .nome-classe:has(nome-figlio) ”:
.parent-div : ha ( h1 ) {
colore di sfondo : #103e6d ;
colore : conchiglia ;
larghezza : 150 pixel ;
altezza : 150 pixel ;
bordo-raggio : cinquanta% ;
allineamento del testo : centro ;
}Qui, abbiamo applicato le seguenti proprietà CSS sull'elemento genitore:
- “ colore di sfondo ” viene utilizzato per specificare il colore di sfondo dell'elemento.
- “ colore ” specifica il colore del testo dell'elemento.
- “ larghezza ” viene utilizzato per definire la larghezza dell'elemento.
- “ altezza ” specifica l'altezza dell'elemento.
- “ bordo-raggio La proprietà ” viene utilizzata per impostare gli angoli arrotondati dell'elemento.
- “ allineamento del testo ” specifica l'allineamento del testo.
Produzione
Come selezionare tutti gli elementi figlio?
Per selezionare l'elemento figlio con l'aiuto del selettore padre, passare attraverso l'esempio fornito.
Esempio
Implementa i seguenti passaggi per creare una pagina HTML:
- Aggiungi un elemento div che contiene due ' ” tag e un “ ” tag con la classe “ bambino-div ”.
- Il bambino ' div ” contiene un elemento “
< div classe = 'genitore-div' >”:
< p > Ciao < / p >
< p > mondo < / p >
< div classe = 'child-div' >
< p > sono un bambino div < / p >
< / div >
< / div >Possiamo selezionare gli elementi figli tramite il genitore “
' classe. Questo non selezionerà solo la sua diretta ' p ” elementi ma seleziona anche i nidificati “ p ' elementi: .parent-div p {
colore di sfondo : #7F167F ;
famiglia di font : corsivo ;
dimensione del font : 25px ;
allineamento del testo : centro ;
colore : fumo bianco ;
}Produzione
Come selezionare tutti gli elementi figli diretti?
Per selezionare il figlio diretto del div genitore, possiamo usare il ' > ” simbolo. Questo aiuterà a selezionare tutti gli elementi 'p' che sono figli diretti di parent '
”. Ad esempio, abbiamo applicato le seguenti proprietà CSS: .parent-div > p {
colore di sfondo : #7F167F ;
famiglia di font : corsivo ;
dimensione del font : 30px ;
allineamento del testo : centro ;
colore : fumo bianco ;
}Il ' famiglia di font ” specifica il carattere dell'elemento selezionato e “ dimensione del font ” viene utilizzato per definire la dimensione del carattere:
Produzione
Abbiamo discusso dei selettori genitore CSS in HTML e CSS.
Conclusione
Nei CSS, il ' :ha() ” selector è utilizzato come pseudo-classe selettore genitore. È particolarmente utilizzato per selezionare elementi padre. Ad esempio, ' .parent-div:ha(h1) ” seleziona l'elemento genitore con il “ ' elementi. Per selezionare l'elemento figlio dell'elemento genitore, utilizzare ' .parent-div p ”. L'istruzione condizionale può essere utilizzata anche per selezionare tutti gli elementi figlio diretti. Questo articolo ha spiegato il selettore genitore CSS con esempi.
- Il bambino ' div ” contiene un elemento “