'. En aquests casos, el ' : té () ” s'utilitza la pseudo-classe del selector pare.
Aquesta publicació descriurà:
- Com estilitzar un element pare especificant els seus elements secundaris?
- Com seleccionar tots els elements secundaris?
- Com seleccionar tots els elements Direct Children?
Com estilitzar un element pare especificant els seus elements secundaris?
Primer, creeu un fitxer HTML amb dos elements 'div' de la següent manera:
- Afegeix dos ' 'elements amb la mateixa classe' pare-div ”.
- El primer conté dos ' ” elements.
- El segon element '
' conté ' ' i ' ”: < div classe = 'parent-div' >
< pàg > Hola < / pàg >
< pàg > món < / pàg >
< / div >
< div classe = 'parent-div' >
< h1 > Hola < / h1 >
< pàg > Tinc l'etiqueta 'h1'. < / pàg >
< / div >Si es requereix estilitzar l'element '
' amb el ' ”, aleshores podem ajustar l'estil de l'element principal subjectant el nen. Per a això, podem utilitzar el ' : té () ” selector.
Des dels dos elements '
', seleccioneu el que conté l'element '' mitjançant ' .class-name:has(nom-fill) ”:
.parent-div : té ( h1 ) {
color de fons : #103e6d ;
color : petxina ;
amplada : 150 píxels ;
alçada : 150 píxels ;
frontera-radi : 50% ;
alineació de text : centre ;
}Aquí, hem aplicat les següents propietats CSS a l'element pare:
- “ color de fons ” s'utilitza per especificar el color de fons de l'element.
- “ color ” especifica el color del text de l'element.
- “ amplada ” s'utilitza per definir l'amplada de l'element.
- “ alçada ” especifica l'alçada de l'element.
- “ frontera-radi ” s'utilitza per establir les cantonades arrodonides de l'element.
- “ alineació de text ” especifica l'alineació del text.
Sortida
Com seleccionar tots els elements secundaris?
Per seleccionar l'element secundari amb l'ajuda del selector principal, seguiu l'exemple donat.
Exemple
Implementeu els passos següents per crear una pàgina HTML:
- Afegiu un element div que contingui dos ' etiquetes ' i un ' 'etiqueta amb la classe' nen-div ”.
- El nen ' div L'element ” conté un element “
< div classe = 'parent-div' >”:
< pàg > Hola < / pàg >
< pàg > món < / pàg >
< div classe = 'div infantil' >
< pàg > sóc div infantil < / pàg >
< / div >
< / div >Podem seleccionar elements fills a través del pare '
” classe. Això no només seleccionarà el seu directe ' pàg ” però també selecciona els elements “ imbricats pàg ” elements: .parent-div pàg {
color de fons : #7F167F ;
família de tipus de lletra : cursiva ;
mida de la font : 25 píxels ;
alineació de text : centre ;
color : fum blanc ;
}Sortida
Com seleccionar tots els elements Direct Children?
Per seleccionar el fill directe del div principal, podem utilitzar el ' > ” símbol. Això ajudarà a seleccionar tots els elements 'p' que són fill directe del pare '
”. Per exemple, hem aplicat les següents propietats CSS: .parent-div > pàg {
color de fons : #7F167F ;
família de tipus de lletra : cursiva ;
mida de la font : 30 píxels ;
alineació de text : centre ;
color : fum blanc ;
}El ' família de tipus de lletra ” especifica el tipus de lletra de l'element seleccionat i “ mida de la font ” s'utilitza per definir la mida del tipus de lletra:
Sortida
Hem parlat dels selectors de pares CSS en HTML i CSS.
Conclusió
En CSS, el ' : té () ” s'utilitza com a pseudo-classe de selector pare. S'utilitza especialment per seleccionar elements pare. Per exemple, ' .parent-div:has(h1) ” selecciona l'element pare amb el “ ” elements. Per seleccionar l'element fill de l'element pare, utilitzeu ' .parent-div pàg ”. La instrucció de condició també es pot utilitzar per seleccionar tots els elements secundaris directes. Aquest article ha explicat el selector de pares CSS amb exemples.
- El nen ' div L'element ” conté un element “