层次选择器
-
后代选择器:在某个元素的后面
/* 后代选择器 */ body p{ background-color: gray; }
-
子选择器 一代 儿子
/*子选择器*/ body>p{ background-color: red; }
-
相邻兄弟选择器 只有一个相邻 向下
/*相邻兄弟选择器 */ .c+ p{ background-color: aqua; }
-
通用兄弟选择器 当前选中元素的向下的所有兄弟元素
/*通用兄弟选择器 */ .c~p{ background-color: chartreuse; }
-
层次选择器案例
<!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>