526互联

CSS样式的高级选择器

发布时间 2023-11-09 10:09:29作者: 和哗

高级选择器

前面也介绍了一些简单的选择器但是这些简单的选择器，无法更加准确选择目标元素，所以需要用到高级选择器。

交集选择器

交集选择器是同时满足多个选择器筛选的条件的才能被选中，即两个集合中相同的元素才能被选中。

语法：是两个选择器之间不能有任何空格

举个例子：

 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>

效果展示：