CSS-高级选择器-层次选择器(后代选择器、子选择器、相邻兄弟选择器、相邻通用选择器)
层次选择器
1、后代选择器:在某个元素的后面,比如:爷爷 爸爸 你,当你为爷爷这个元素设置样式时,那后面的两个元素,也是跟被设置,如body p{},那个这选择器代表着,body标签中,所有有的p标签生效
2、子选择器:一代,只是当前元素的下一代,如:爷爷 爸爸 你,生效的只会是,前面两个,body>p{} 表示body标签内的第一级标签为p标签,那就生效
3、相邻兄弟选择器:相邻、同辈,只有相邻下方的第一个标签生效 .class名称 + p{} 表示如果class名称下方的标签是p标签,那就生效,并且只有一个生效
4、相邻通用选择器:相邻下方对应全部标签生效 ,.class名称~p{} class下方所有的p标签生效
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>层次选择器</title>
后代选择器
<style>
body p{/*使用空格--body后面所有的p标签*/ background:red; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>p4</li> <li>p5</li> <li>p6</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层次选择器</title> 子选择器 <style> body>p{/*使用>来表示*,相当于只会生效在body标签内的p元素,那body标签内,其他标签包含有p标签的话不会生效/ background:red; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>p4</li> <li>p5</li> <li>p6</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层次选择器</title> <style> /*相邻兄弟选择器:使用+号*/ .active + p{/*表示,class名称相邻下方的的p标签会生效,并且只有一个标签会生效,这个属性*/ background:red; } </style> </head> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <ul> <li>p4</li> <li>p5</li> <li>p6</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层次选择器</title> <style> /*通用兄弟选择器*/ .active~p{/*与class名称相邻下方的p标签,都生效*/ background:red; } </style> </head> <body> <p>p1</p> <p class="active">p2</p> <p>p3</p> <p>p3</p> <p>p3</p> <p>p3</p> <p>p3</p> <ul> <li>p4</li> <li>p5</li> <li>p6</li> </ul> </body> </html>