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>

运行结果:


注意点:

  1. 后代包括:⼉⼦、孙⼦、重孙⼦......
  2. 后代选择器中,选择器与选择器之前通过 空格 隔开

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>


注意点:

  1. ⼦代只包括:⼉⼦
  2. ⼦代选择器中,选择器与选择器之前通过 > 隔开

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>


注意点:

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

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中非常强大的工具,合理使用可以:

  1. 减少HTML中的类名依赖,保持代码整洁
  2. 提高样式选择效率,减少重复代码
  3. 实现更复杂的样式控制
  4. 创建丰富的交互效果
相关推荐
陈随易9 分钟前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic12 分钟前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮14 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温16 分钟前
DOM元素添加技巧全解析
前端
JSON_L19 分钟前
Vue 电影导航组件
前端·javascript·vue.js
用户214118326360227 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
大模型真好玩41 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫1 小时前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler2811 小时前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js