CSS样式的高级选择器
高级选择器
前面也介绍了一些简单的选择器但是这些简单的选择器，无法更加准确选择目标元素，所以需要用到高级选择器。
交集选择器
交集选择器是同时满足多个选择器筛选的条件的才能被选中，即两个集合中相同的元素才能被选中。
语法：是两个选择器之间不能有任何空格
举个例子：
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>
效果展示：
