高级选择器
优先级：
1、最大的特点就是个数多的优先级高，个数决定优先级
2、高级选择器优先级与类别无关（后代、子代、兄弟、相邻等都是同等优先级的，谁在上面谁的优先级高）
3、id无限大于class标签无限大于标签
4、上方结果之后优先级还一致，和顺序有关
1、群组选择器
div,p,h1{
color: hotpink;
font-size: 30px;
}
2、后代选择器（使用率最高），有两种写法 空格 和 >
空格写法
.sup .sub{
color: darkolivegreen;
}
PS：.sup可以为.sub的父亲，也可以为父辈
>号写法
.sup > .sub{}
PS：.sup只能为.sub的父亲
3、兄弟选择器，有两种写法 ~ 和 +
~ 写法
.div1 ~ .div2{
}
PS：.div2在.div1下的兄弟，.div1是修饰词，.div1与.div2之间可以有其他兄弟，可以直接定位到其他兄弟
+写法
.div1 + .div2{}
PS:.div2在.div1下的兄弟，.div1是修饰词，.div1与.div2之间不可以有其他兄弟，可以直接定位到其他兄弟
4、交叉选择器
h2.hd{
color: firebrick;
}
PS：是h2标签且有一个class名为hd
5、多类名选择器
.h.h61{
color: slateblue;
}
PS：有一个标签有多个类名
高级选择器实例
需求：要让三个标签（div p h1）的字体颜色同时为红色
思路：可以使用类标签解决，类名唯一可以精确，类名为多可以范围修改，但是用类名来做有点大题小做，所以使用群组选择器
群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*群组选择器*/
/*使用群组选择器批量修改标签字体的颜色*/
div,p,h1{
color: hotpink;
font-size: 30px;
}
/*这里没有设置，采用默认值*/
i{
color: inherit;
}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
<h1>789</h1>
<!--这里div标签的字体颜色和上面的群组字体颜色一样，这是因为i标签有一个默认值inherit叫继承，继承样式找父级的，因为上面群组选择器里面设置了div的颜色，所以如果不单独给i设置字体颜色，则继承父级的参数-->
<div class="box1">
<i>box1</i>
</div>
<div class="box2">
<i>box2</i>
</div>
</body>
</html>
需求：改变父标签(div)下的单个子标签(i)字体的颜色
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*后代选择器*/
/*控制一个有父级的子级参数*/
/*.box1就是修饰词，修饰词必须是父级，用来修饰下面的子级，修饰词可以是类名、可以是id名*/
/*用大于号链接只表示父子关系，#box1 > i可匹配，body>i不能匹配*/
.box1 i{
color: darkolivegreen;
}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
<h1>789</h1>
<div class="box1">
<i>box1</i>
</div>
<div class="box2">
<i>box2</i>
</div>
</body>
</html>
需求：有两个不同的列表标签，但是两个标签下有相同的名字列名字，需要修改一个列表标签下的单个列名字体的颜色，不影响另一个相同名字的列名字体颜色
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*兄弟选择器,用 ~ 表示，也可以用+代表相邻（用+如果不是兄弟则会不生效），兄弟一定是相邻的，但是相邻的不一定是兄弟*/
h3 ~ .li-3{
color: orange;
}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
<h1>789</h1>
<div class="box1">
<i>box1</i>
</div>
<div class="box2">
<i>box2</i>
</div>
<ul>
<!--这个列表的父级是h3-->
<h3></h3>
<li class="li-1">li-1</li>
<li class="li-2">li-2</li>
<li class="li-3">li-3</li>
</ul>
<ul>
<!--这个列表的父级是ul-->
<li class="li-1">li-1</li>
<li class="li-2">li-2</li>
<li class="li-3">li-3</li>
</ul>
</body>
</html>
PS：要使用兄弟选择器区分，必须两个列表的父级有所区别，否则无法区分
需求：相同的类名，如何区分单个设置字体颜色
交叉选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*交叉选择器,用写在一起作为连接*/
h2.hd{
color: firebrick;
}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
<h1>789</h1>
<div class="box1">
<i>box1</i>
</div>
<div class="box2">
<i>box2</i>
</div>
<ul>
<!--这个列表的父级是h3-->
<h3></h3>
<li class="li-1">li-1</li>
<li class="li-2">li-2</li>
<li class="li-3">li-3</li>
</ul>
<ul>
<!--这个列表的父级是ul-->
<li class="li-1">li-1</li>
<li class="li-2">li-2</li>
<li class="li-3">li-3</li>
</ul>
<!--这里使用交叉选择器就可以控制改变一个h2的参数-->
<h2 class="hd">标题</h2>
<h4 class="hd">标题</h4>
<h2>标题</h2>
<h6 class="h">标题1</h6>
<h6 class="h">标题2</h6>
</body>
</html>
需求：两个相同的标签名，类名也相同控制修改其中一个标签的字体颜色
多类名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*多类名选择器，由交叉选择器演变而来*/
.h.h61{
color: slateblue;
}
</style>
</head>
<body>
<div>123</div>
<p>456</p>
<h1>789</h1>
<div class="box1">
<i>box1</i>
</div>
<div class="box2">
<i>box2</i>
</div>
<ul>
<!--这个列表的父级是h3-->
<h3></h3>
<li class="li-1">li-1</li>
<li class="li-2">li-2</li>
<li class="li-3">li-3</li>
</ul>
<ul>
<!--这个列表的父级是ul-->
<li class="li-1">li-1</li>
<li class="li-2">li-2</li>
<li class="li-3">li-3</li>
</ul>
<h2 class="hd">标题</h2>
<h4 class="hd">标题</h4>
<h2>标题</h2>
<!--这里要解决两个相同的标签名，类名也相同控制修改其中一个标签的字体颜色，就要给其中一个起多类名即可解决-->
<!--class里面第一个h叫控制样式，h61叫控制运行-->
<h6 class="h h61">标题h6-1</h6>
<h6 class="h">标题h6-2</h6>
</body>
</html>
高级选择器优先级实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器优先级</title>
<style>
div{
font-size: 100px;
color: aqua;
}
/*这里个数相同，谁在最上面谁的优先级最高*/
div div{
color: slateblue;
}
div > div{
color: firebrick;
}
div + div{
color: yellowgreen;
}
/*相同类型下,最终的优先级还是取决于个数*/
.d2{
color: blue;
}
div .d2{
color: darkmagenta;
}
/*这里可以看到id优先级最高*/
#dd{
color: forestgreen;
}
</style>
</head>
<body>
<div class="d1">
<div>
<div class="d2" id="dd">查看优先级</div>
</div>
</div>
</body>
</html>
123123