Selector de jerarquía
-
Selector descendiente: detrás de un elemento
/* 后代选择器 */ body p{ background-color: gray; } -
Hijo de la generación del selector de niños
/*子选择器*/ body>p{ background-color: red; } -
El selector de hermanos adyacente solo tiene uno adyacente hacia abajo
/*相邻兄弟选择器 */ .c+ p{ background-color: aqua; } -
Selector de hermanos universal todos los elementos del hermano por debajo del elemento seleccionado actualmente
/*通用兄弟选择器 */ .c~p{ background-color: chartreuse; } -
Caso de selector jerárquico
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> </head> <style> <!-- --> /* p{*/ /* background-color: red;*/ /* }*/ /* 后代选择器 */ /*body p{*/ /* background-color: gray;*/ /*}*/ /*子选择器*/ /*body>p{*/ /* background-color: red;*/ /*}*/ /*相邻兄弟选择器 只有一个相邻 向下*/ /* .c+ p{*/ /* background-color: aqua;*/ /* }*/ /*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/ .c~p{ background-color: chartreuse; } </style> <body> <p>p1</p> <p class="c">p2</p> <p>p3</p> <ul> <li><p>p4</p></li> <li><p>p5</p></li> <li><p>p6</p></li> </ul> <p>p7</p> <p>p8</p> <p>p9</p> </body> </html>