高级选择器
前面也介绍了一些简单的选择器但是这些简单的选择器，无法更加准确选择目标元素，所以需要用到高级选择器。
交集选择器
交集选择器是同时满足多个选择器筛选的条件的才能被选中，即两个集合中相同的元素才能被选中。
语法：是两个选择器之间不能有任何空格
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /*交集选择器*/
10 div.a {
11 color: aqua;
12 }
13 </style>
14 </head>
15
16 <body>
17 <!-- 交集 两个集合中 相同的那部分 同时满足多个选择器 选择器1 选择器2 二者之间没有任何符号或空格-->
18 <div>123</div>
19 <div class="a">123</div><!--交集集合只有这个能选中-->
20 <p class="a">123</p>
21 </body>
22
23 </html>
效果展示：
只有满足是一个div标签且有类名为a的标签才能被选中。
并集选择器
所有的选择器都可以被选中，即选中集合中所有元素。
语法：选择器之间使用(,)隔开
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 并集选择器 */
10 div,
11 p {
12 color: aqua;
13 }
14 </style>
15 </head>
16
17 <body>
18 <!-- 并集 两个集合中所有的部分 标签选择器之间用,隔开 -->
19 <div>123</div>
20 <p>123</p>
21 </body>
22
23 </html>
效果展示：
两个标签<p>和<div>标签都能被选中。
子类选择器
选中某元素子类的元素，只能选儿子不能选孙子。
语法：选择器之间使用(>)隔开
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 .a>div {
10 color: red;
11 }
12 </style>
13 </head>
14
15 <body>
16 <!-- 子代选择器 只选择儿子不选择孙子 语法：选择器>选择器-->
17
18 <div>
19 <div class="a">
20 <div>123
21 <p>234</p>
22 </div>
23 </div>
24 </div>
25 </body>
26
27 </html>
效果展示：
很奇怪为什么<div>标签中的孙子<p>也会字体变红呢？
因为字体样式是具有继承性的，所以儿子字体变红色，孙子字体也是会变红色。
后代选择器
选中某元素的所有后代元素，无论是儿子还是孙子都选
语法：选择器之间使用(空格)隔开
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 后代选择器 无论时孙子 还是儿子 都选*/
10 /* 选中.a 下所有的 div 元素 语法：标签(空格)标签 */
11 .a div {
12 color: bisque;
13 }
14 </style>
15 </head>
16
17 <body>
18 <div class="a">
19 <div class="b">
20 <div>123<div>123</div>
21 <!-- 不过问题是 字体样式会继承的 -->
22 </div>
23 </div>
24 </div>
25 </body>
26
27 </html>
效果展示：
相邻选择器
相邻选择器，如果下一个元素与指定元素一致时选中，只能选中一个元素或者一个都不选
语法：选择器之间使用(+)隔开
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 相邻选择器 */
10 .a+div {
11 color: aqua;
12 }
13
14 /* 相邻的 下一个元素 相邻选择器只能一个元素或一个不选 */
15 </style>
16 </head>
17
18 <body>
19 <div>
20 <div>123</div>
21 <div class="a">123</div>
22 <p>123</p>
23 <div>123</div>
24 <div>123</div>
25 </div>
26 </body>
27
28 </html>
效果展示：
因为选择器时.a+div相邻选择器，而类名为a的标签下一个元素并不是<div>标签而是<p>标签所以不会选中。
兄弟选择器
兄弟选择器可以选中同级类多个指定相同的选择器
语法：选择器之间使用(~)隔开
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 兄弟选择器 可以选中多个(注意只选下面的标签，上面的不选)*/
10 /* 语法：选择器~选择器 */
11 .a~div {
12 color: aqua;
13 }
14 </style>
15 </head>
16
17 <body>
18 <div>
19 <div>123</div>
20 <div class="a">123</div>
21 <p>123</p>
22 <div>123</div>
23 <div>123</div>
24 </div>
25 <div>123</div><!--这个与里面的div不是兄弟关系-->
26 </body>
27
28 </html>
效果展示：
类名a选中的标签与22和23同一级所以选中改变字体颜色，而25不是与它同一级所以无法选中。
子元素选择器
子元素选择器分为两种：
①使用:nth-child(第几个子元素)
②使用:nth-of-type(第几个子元素)
两者之间相同点是可以选择第几个子类元素，而不同点是:nth-child()可能会被其他标签所影响，而:nth-of-type()不会被其他标签所影响。
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 子元素选择器 */
10 /* 如果使用:nth-child()的时候上面出现一个其他标签就无法选中正确的标签 */
11 ul>li:nth-child(2) {
12 color: red;
13 }
14
15 /* nth child 会被其他元素所影响 */
16
17 /* nth of type 之选中同种元素，不会被其他元素影响*/
18
19 /* ul>li:nth-of-type(2) {
20 color: red;
21 } */
22 </style>
23 </head>
24
25 <body>
26 <ul>
27 <p>123</p>
28 <li>123</li>
29 <li>123</li>
30 <li>123</li>
31 <li>123</li>
32 </ul>
33 </body>
34
35 </html>
效果展示：
可以看出我明明是想让他选中<li>标签的第二个子类，结果只选中第一个，就是因为上面有<p>标签导致被影响
而:nth-of-type()就不会受影响。因为它只会选中同种元素。
举个例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 /* 子元素选择器 */
10 /* 如果使用:nth-child()的时候上面出现一个其他标签就无法选中正确的标签 */
11 /* ul>li:nth-child(2) {
12 color: red;
13 } */
14
15 /* nth child 会被其他元素所影响 */
16
17 /* nth of type 之选中同种元素，不会被其他元素影响*/
18
19 ul>li:nth-of-type(2) {
20 color: red;
21 }
22 </style>
23 </head>
24
25 <body>
26 <ul>
27 <p>123</p>
28 <li>123</li>
29 <li>123</li>
30 <li>123</li>
31 <li>123</li>
32 </ul>
33 </body>
34
35 </html>
效果展示：
标签：样式,标签,元素,nth,123,选中,选择器,CSS From： https://www.cnblogs.com/gzyhrc/p/17815918.html