CSS的复合选择器

CSS选择器是前端开发中非常重要的基础知识，而复合选择器则是其中功能强大且实用的部分。本文将详细介绍各种复合选择器的用法和应用场景，帮助您更高效地选择和控制页面元素。

1. 后代选择器（空格）

后代选择器通过空格连接两个选择器，用于选择嵌套在父元素内部的所有匹配子元素，不论嵌套层级有多深。

语法：祖先选择器后代选择器{}

代码示例：

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        .container .box1-1 {
            width: 100px;
            height: 100px;
            background-color: #19ff32;
            color: #5440ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--作为container的亲儿子-->
        <div class="box1-1">我是儿子</div>
        <div class="box1">
            <!--做为container的孙子-->
            <div class="box1-1">
                我是孙子
                <div class="box1-1">
                    <!--做为container的孙孙-->
                    我是孙孙子
                </div>
            </div>
        </div>
    </div>
</body>
</html>

运行结果：

注意点：

后代包括：⼉⼦、孙⼦、重孙⼦......
后代选择器中，选择器与选择器之前通过空格隔开

2. 子代选择器（>）

子代选择器使用>符号，只选择直接子元素，不会选择更深层级的元素。

语法：子代选择器:亲父亲选择器>亲儿子选择器{}

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
  <style>
    .container>.box1{
      width: 100px;
      height: 100px;
      background-color: #19ff32;
    }
  </style>
</head>
<body>
    <div class="container">
        <!--作为container的亲儿子-->
        <div class="box1">我是儿子</div>
        <div class="box1-1">
            <!--做为container的孙子-->
            <div class="box1">
                我是孙子
                <div class="box1">
                    <!--做为container的孙孙-->
                    我是孙孙子
                </div>
            </div>
        </div>
    </div>
</body>
</html>

注意点：

⼦代只包括：⼉⼦
⼦代选择器中，选择器与选择器之前通过 > 隔开

3. 并集选择器（,）

并集选择器可以同时选择多个元素，为它们设置相同的样式。

语法：并集选择器：选择器1，选择器2....{}

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        h1,div p, .outer{
            width:100px;
            height:100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>我是大标题</h1>
    <h2>我是小标题</h2>
    <p class="outer">我是盒子外部的段落！！！</p>
    <div>
         <p class="inner">
             我是盒子内部的段落！！！
         </p>
    </div>
</body>
</html>

注意点：

并集选择器中的每组选择器之间通过 , 分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常⼀⾏写⼀个，提⾼代码的可读性

4.交集选择器

交集选择器可以通过对元素的类名和id名以及标签名字，对元素进行精准定位，为它们设置样式。

语法：交集选择器:标签名称.选择器名称{}

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
     /*给类名为boxid名为one的元素设置属性*/
     .box#one {
          width: 100px;
          height: 100px;
          background-color: red;
      }
     /*给标签为h2id名为three的元素设置属性*/
     h2#three{
          width: 100px;
          height: 100px;
          background-color: blueviolet;
     }
    </style>
</head>
<body>
    <div class="box">
        <div class="box" id="one">111</div>
         <h2 class="box" id="two">222</h2>
         <h2 class="box" id="three">222</h2>
         <p class="box" id="four">333</p>
    </div>
</body>
</html>

运行结果：

5.伪类结构选择器：hover{}

伪类结构主要是用来制作鼠标悬停的时候的动态效果。

语法：伪类选择器：hover{}

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类结构选择器</title>
    <style>
        h1:hover{
            color: red;
        }
        .outer:hover{
            background-color: #ef96c2;
        }
        a:hover{
            color: #0be4d5;
        }
    </style>
</head>
<body>
    <h1>我是大标题</h1>
    <p class="outer">伪类结构主要是用来制作鼠标悬停的时候的动态效果。</p>
    <div>
        <a href="http://www.baidu.com">百度一下</a>
    </div>
</body>
</html>

运行结果：

总结：

复合选择器是CSS中非常强大的工具，合理使用可以：

减少HTML中的类名依赖，保持代码整洁
提高样式选择效率，减少重复代码
实现更复杂的样式控制
创建丰富的交互效果