CSS的选择器-组合选择器
1、后代子代选择器
在所用的样式后面加上空格，表示作用于该样式的后代；该标签下的所有标签都称之为后代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器：空格表示后代，下面示例表示c1下面的所有后代*/
.c1 {
color: red;
}
/*后代选择器，空格表示后代，c1后代中包含c3的*/
.c1 .c3{
color: blue;
}
/*后代选择器，表示c1的后代包含c2，c2的后代包含c3*/
.c1 .c2 .c3{
color: brown;
}
/*子代选择器，用“>”表示子代，表示作用于c1的儿子*/
.c1 > .c4{
color: aqua;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3">item1</div>
</div>
<div class="c3">item2</div>
<div class="c4">item3</div>
</div>
</body>
</html>2、兄弟选择器
- 毗邻选择器：第一个兄弟（同级称之为兄弟），只能向下找兄弟
示例中c2、c3、c4都是兄弟，但是该样式之作用于c4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c3 + .c4{ color: blue; } </style> </head> <body> <div class="c1"> <div class="c2"> <div class="c3">item1</div> </div> <div class="c3">item2</div> <div class="c4">item3</div> </div> </body> </html> - 兄弟选择器（同级别的都是兄弟）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*与id为i1的兄弟，标签为div的*/ #i1 ~ div{ color: red; } /*与id为i1的兄弟，并且标签为div，class为c4*/ #i1 ~ div.c4{ color: blue; } </style> </head> <body> <p id="i1">item0</p> <div class="c1">item1</div> <div class="c2">item2</div> <div class="c3">item3</div> <div class="c4">item4</div> </body> </html>
3、与或选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*与选择器：标签为p的，并且class为c1，需要两个条件同时满足*/
p.c1{
color: red;
}
/*或选择器：用逗号表示或；标签为p并且class为c1，或id为i1*/
p.c1,#i1{
color: blue;
}
</style>
</head>
<body>
<div class="c1">item1</div>
<p class="c1">item2</p>
<div>item3</div>
<p id="i1">item4</p>
</body>
</html>