分类:
①后代选择器
②子选择器
③相邻兄弟选择器
④通用兄弟选择器
一、后代选择器
定义:选择所有被E元素包含的F元素,中间用空格隔开
E F{}
ul li span{
color: aqua;
}
<ul>
<li><span>前置</span> 列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
二、子代选择器
定义:选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示
语法
E>F{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>p{
color: aqua;
}
</style>
</head>
<body>
<div>
<p>大家好哦</p>
<ul>
<li>
<p>我很好</p>
</li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>
三、相邻兄弟选择器
定义:选择紧跟E元素后面的F元素,用加号表示,选择相邻的第一个兄弟元素。
语法:
E+F{}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1+p{
color:red;
}
四、通用兄弟选择器
定义:选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开
语法
E~F{}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
h1~p{
color:red;
}