当前位置： 首页 > news >正文

CSS详细基础（三）复合选择器

news 2026/3/27 8:08:23

前两章介绍了CSS中的基础属性，以及一些基础的选择器，本贴开始介绍复合选择器的内容~


​ 在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 ​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签） ​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等~

目录

一.后代选择器

二.并集选择器

三.伪类选择器

一.后代选择器

所谓后代选择器，顾名思义——来源自某个“祖先”；在CSS中，允许将父标签中的子标签单独选中赋予样式，这就用到了后代选择器~

现给出结构文件如下：

<body><ol>我是犯规写法。<br>有序列表中必须有li，否则该文本不属于ol之中。<li>我是ol的子类,我是红色</li><li>我是ol的子类,我是红色</li><li>我是ol的子类,我是红色</li><li><a href="#">我是ol中li的子类，我是蓝色</a></li><!-- 此处的子类为a标签 --><!-- 实现了三级连跳，选择的其实是li的子标签a --></ol><ul><li>我是ul中li的子类，我是橙色</li><li>我是ul中li的子类，我是橙色</li><li>我是ul中li的子类，我是橙色</li><li><a href="#">我是ul中li的子类，我是绿色</a></li><!-- 原理同无序列表中的a标签相同 --></ul><ul class="cyan"><li>我是另一个ul中li的子类，我也是橙色</li><li>我是另一个ul中li的子类，我也是橙色</li><li>我是另一个ul中li的子类，我也是橙色</li><li><a href="#">我是ul中li的子类，我是青色</a></li><li><a href="#">我是ul中li的子类，我是青色</a></li><li><a href="#">我是ul中li的子类，我是青色</a></li></ul></body>

如下的代码可以实现选中有序列表中的列表项：

      ol li{color: red;}

还可以选中更多级别的子标签，如下选择的是列表项中的a标签：

      ol li a{color: blue;}

 还有一种写法是直接将标签的class属性作为父类，也就是说允许类选择器和标签选择器混用~

同理Id选择器也支持这样的操作，这里不再赘述~ 

完整代码不沾了，效果如下：

  

上述的犯规写法要注意一下：ul或ol中的元素必须包裹在li——即列表项中，负责不能按照列表项正常显示~ 

二.并集选择器

与后代选择器的功能从某种角度来说恰恰相反：后代选择器某种程度上是为了将样式区分得更细，而并集选择器则是为了方便控制多种标签的样式一致而诞生的

下述结构文件中有多种标签：

<body><div>熊大</div><span>熊二</span><p>光头强</p><ul class=" num"><li>亚古兽</li><li>加布兽</li><li>哥玛兽</li></ul>

注意并集选择器的语法——标签相互之间用逗号隔开 ：

    <style>div,span,.num{color: cadetblue;font-size: 30px;}/* 并集选择器实际上就是标签选择器的复合体 *//* 格式上一般竖着写，通过逗号隔开，实现了多种标签的合体选择。 */</style>

 效果如下——被选中的标签样式均保持一致：

三.伪类选择器

伪类选择器（pseudo-class selector）是 CSS 中一类选择器，该选择器可以说是CSS基础里最抽象的选择器了，它们可以选中 HTML 中某些状态（如 hover、active、visited等）下的元素，从而改变元素的样式。同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

也就是说，它的主要功能是实现某种事件下标签样式的动态变化，比如选中、点击等情况~

如下定义了结构文件：

<body><h3 class="center">影视目录</h3><div><a  href="https://www.iqiyi.com/v_19rrje300c.html?vfm=2008_aldbd&fv=p_02_01">点击观看迪迦奥特曼第一集</a></div><div><a  href="https://www.iqiyi.com/v_19rrje2zqg.html?vfm=2008_aldbd&fv=p_02_01#curid=93776900_15c8a06cfe8511dfaa6aa4badb2c35a1">点击观看迪迦奥特曼第二集</a></div><div><a  href="https://www.iqiyi.com/v_19rrje2zno.html?vfm=2008_aldbd&fv=p_02_01#curid=93777000_15c8a2f6fe8511dfaa6aa4badb2c35a1">点击观看迪迦奥特曼第三集</a></div><div><a  href="https://www.iqiyi.com/v_19rrje2zs0.html?vfm=2008_aldbd&fv=p_02_01#curid=93777100_15c8a558fe8511dfaa6aa4badb2c35a1">点击观看迪迦奥特曼第四集</a></div><div><a  href="https://www.iqiyi.com/v_19rrje2zj0.html?vfm=2008_aldbd&fv=p_02_01#curid=93777200_15c8a7e2fe8511dfaa6aa4badb2c35a1">点击观看迪迦奥特曼第五集</a></div><div class="yinan">疑难杂症：a标签默认的属性貌似有visited属性。</div>
</body>

以及一些默认且共有的属性：

    .center{text-align:center ;}div{text-align: center;/* text-align的功能貌似非常广泛 */font-size: large;}

然后开始写伪类选择器：

  • a:link：规定链接标签a未被点击过所拥有的颜色~
  • a:visited：与上文恰好相反，被点击过后的颜色~
  • a:hover：光标接触时所展示的颜色~
  • a:active：当链接标签被选中后的颜色~

给大家展示一段伪类选择器的样式：

    a:link{color: black;text-decoration: none;}/* 没点过是黑色 */a:visited{color: blue;}/* 点过是蓝色 *//* 效果非常一般，实际开发用得少 */a:hover{color: crimson;}/* 光标接触为红色 */a:active{color:darkorange;}

大部分地方没什么值得注意的，有一点要说明的是text-decoration: none属性的功能是将a标签原有的下划线去掉~

此外，别的标签也可以使用伪类选择器，比如input：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input:focus{background-color: red;}/* 选中表单元素后会变成红色 */</style>
</head>
<body><form><div>这是第一个输入框：<input type="text"> </div><div><input type="text"> </div><div><input type="text"> </div></form>
</body>
</html>

相关文章：

CSS详细基础（三）复合选择器

前两章介绍了CSS中的基础属性&#xff0c;以及一些基础的选择器&#xff0c;本贴开始介绍复合选择器的内容~ ​ 在 CSS 中&#xff0c;可以根据选择器的类型把选择器分为基础选择器和复合选择器&#xff0c;复合选择器是建立在基础选择器之上&#xff0c;对基本选择器进行组合形…...

编程日记 2023/9/29 5:00:21

LeetCode【2251. 花期内花的数目】

给你一个下标从 0 开始的二维整数数组 flowers &#xff0c;其中 flowers[i] [starti, endi] 表示第 i 朵花的 花期 从 starti 到 endi &#xff08;都 包含&#xff09;。同时给你一个下标从 0 开始大小为 n 的整数数组 people &#xff0c;people[i] 是第 i 个人来看花的时间…...

编程日记 2023/9/29 4:55:12

大数据(九)：数据可视化(一)

专栏介绍 结合自身经验和内部资料总结的Python教程，每天3-5章，最短1个月就能全方位的完成Python的学习并进行实战开发，学完了定能成为大佬！加油吧！卷起来！ 全部文章请访问专栏：《Python全栈教程（0基础）》 再推荐一下最近热更的：《大厂测试高频面试题详解》 该专栏对…...

编程日记 2023/9/29 4:53:09

讲讲项目里的仪表盘编辑器（二）

应用场景 正常来说&#xff0c;编辑器应用场景应该包括&#xff1a; 编辑器-预览 编辑器 最终运行时 怎么去设计 上一篇推文&#xff0c;我们已经大概了解了编辑器场景。接下来&#xff0c;我们来看预览时的设计 编辑器-预览 点击预览按钮&#xff0c;执行以…...

编程日记 2023/9/29 4:52:08

文心一言 VS 讯飞星火 VS chatgpt （102）-- 算法导论9.3 8题

八、用go语言&#xff0c;设 X[1…n]和 Y[1…n]为两个数组&#xff0c;每个都包含n个有序的元素。请设计一个 O(lgn)时间的算法来找出数组 X和Y中所有 2n 个元素的中位数。 文心一言&#xff1a; 要在 O(lgn) 时间内找出两个有序数组 X 和 Y 中所有元素的中位数&#xff0c;可…...

编程日记 2023/9/29 4:51:07

axios添加缓存请求，防止多次请求，单页面多个同一组件造成多次请求解决方案

在axios中&#xff0c;添加 const cacheMap {};响应拦截添加 try {// 删除缓存const api res.config.url.replace(process.env.VUE_APP_BASE_API, "");if (cacheMap.hasOwnProperty(api)) {delete cacheMap[api];}} catch (err) {}创建两个请求方法 /*** Get缓存…...

编程日记 2023/9/29 4:50:06

Java包装类与自动拆箱装箱

有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址[1] 面试题手册[2] 系列文章地址[3] 1. 什么是 Java 包装类和自动拆箱装箱&#xff1f; Java 中的基本数据类型&#xff08;如 int、cha…...

编程日记 2023/9/29 4:49:04

基于SpringBoot网上超市的设计与实现【附万字文档(LW)和搭建文档】

主要功能 前台登录&#xff1a; 注册用户&#xff1a;用户名、密码、姓名、联系电话 用户&#xff1a; ①首页、商品信息推荐、商品资讯、查看更多 ②商品信息、商品详情、评论、点我收藏、添加购物车、立即购买 ③个人中心、余额、点我充值、更新信息、我的订单、我的地址、我…...

编程日记 2023/9/29 4:47:01

二、C++项目：仿muduo库实现并发服务器之时间轮的设计

文章目录 一、为什么要设计时间轮&#xff1f;&#xff08;一&#xff09;简单的秒级定时任务实现&#xff1a;&#xff08;二&#xff09;Linux提供给我们的定时器&#xff1a;1.原型2.例子 二、时间轮&#xff08;一&#xff09;思想&#xff08;一&#xff09;代码 一、为什…...

编程日记 2023/9/29 4:46:01

计算机竞赛 深度学习OCR中文识别 - opencv python

文章目录 0 前言1 课题背景2 实现效果3 文本区域检测网络-CTPN4 文本识别网络-CRNN5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习OCR中文识别系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;…...

编程日记 2023/9/29 4:44:59

蓝桥等考Python组别五级003

第一部分：选择题 1、Python L5 （15分） 表达式“a >= b”等价于下面哪个表达式？（ ） a > b and a == ba > b or a == ba < b and a == ba < b or a > b正确答案：B 2、Python L5 （15分） 当x是偶数时，下面哪个表达式的值一定是True？（ …...

编程日记 2023/9/29 4:42:57

学之思项目第一天-完成项目搭建

一、前端 拉下前端代码执行 npm i 然后执行npm run serve就行了 二、后端 搭建父子模块 因为这个涉及到前台以及后台管理所以使用父子模块 并且放置一个公共模块&#xff0c;放置公共的依赖以及公共的代码 2.1 搭建父子工程 这个可以使用直接一个个的maven模块&#xff…...

编程日记 2023/9/29 4:41:56

pandas---＞CSV / JSON

csv CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。 CSV 是一种通用的、相对简单的文…...

编程日记 2023/9/29 4:34:46

LeetCode算法二叉树—116. 填充每个节点的下一个右侧节点指针

目录 116. 填充每个节点的下一个右侧节点指针 题解&#xff1a; 代码&#xff1a; 运行结果&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;N…...

编程日记 2023/9/29 4:33:45

二、2023.9.28.C++基础endC++内存end.2

文章目录 17、说说new和malloc的区别&#xff0c;各自底层实现原理。18、 说说const和define的区别。19、 说说C中函数指针和指针函数的区别&#xff1f;20、 说说const int *a, int const *a, const int a, int *const a, const int *const a分别是什么&#xff0c;有什么特点…...

编程日记 2023/9/29 4:31:43

DevSecOps 将会嵌入 DevOps

通常人们在一个项目行将结束时才会考虑到安全&#xff0c;这么做会导致很多问题&#xff1b;将安全融入到DevOps的工作流中已产生了积极结果。 DevSecOps&#xff1a;安全正当时 一直以来&#xff0c;开发人员在构建软件时认为功能需求优先于安全。虽然安全编码实践起着重要作…...

编程日记 2023/9/29 4:28:37

不同管径地下管线的地质雷达响应特征分析

不同管径地下管线的地质雷达响应特征分析 前言 以混凝土管线为例&#xff0c;建立了不同管径的城市地下管线模型&#xff0c;进行二维地质雷达正演模拟&#xff0c;分析不同管径管线的地质雷达响应特征。 文章目录 不同管径地下管线的地质雷达响应特征分析前言1、管径50cm2、…...

编程日记 2023/9/29 4:25:34

【接口测试学习】白盒测试 接口测试 自动化测试

一、什么是白盒测试 白盒测试是一种测试策略&#xff0c;这种策略允许我们检查程序的内部结构&#xff0c;对程序的逻辑结构进行检查&#xff0c;从中获取测试数据。白盒测试的对象基本是源程序&#xff0c;所以它又称为结构测试或逻辑驱动测试&#xff0c;白盒测试方法一般分为…...

编程日记 2023/9/29 4:24:32

7.网络原理之TCP_IP(下)

文章目录 4.传输层重点协议4.1TCP协议4.1.1TCP协议段格式4.1.2TCP原理4.1.2.1确认应答机制 ACK&#xff08;安全机制&#xff09;4.1.2.2超时重传机制&#xff08;安全机制&#xff09;4.1.2.3连接管理机制&#xff08;安全机制&#xff09;4.1.2.4滑动窗口&#xff08;效率机制…...

编程日记 2023/9/29 4:22:29

Docker Dockerfile解析

Dockerfile是什么 Dockerfile是用来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本。 官网&#xff1a;Dockerfile reference | Docker Docs 构建三步骤&#xff1a; 编写Dockerfile文件docker build命令构建镜像docker run依镜像运行容…...

编程日记 2023/9/29 4:14:18

深度解析 APT：Linux 运维人员的“瑞士军刀”，你真的用对了吗？

在 Linux 的世界里&#xff0c;尤其是对于 Debian 系&#xff08;如 Ubuntu、Linux Mint&#xff09;的用户来说&#xff0c;APT 是一个无法绕开的名字。很多初学者在安装软件时&#xff0c;只知道机械地复制粘贴 sudo apt install 命令&#xff0c;却对背后这套强大的机制知之…...

编程新知 2026/3/27 8:02:21

Wan2.2-T2V-A5B提示词怎么写？新手快速出效果的实用指南

Wan2.2-T2V-A5B提示词怎么写&#xff1f;新手快速出效果的实用指南 1. 认识Wan2.2-T2V-A5B视频生成模型 Wan2.2-T2V-A5B是一款由通义万相开源的轻量级文本到视频生成模型&#xff0c;拥有50亿参数规模。虽然它生成的视频分辨率是480P&#xff0c;但在时序连贯性和运动推理能力…...

编程新知 2026/3/27 5:48:58

brpc跨平台构建自动化：Jenkins与GitHub Actions终极指南

brpc跨平台构建自动化&#xff1a;Jenkins与GitHub Actions终极指南 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recomm…...

编程新知 2026/3/27 5:46:58

JPEXS Free Flash Decompiler社区大使选拔流程：申请与评审完全指南

JPEXS Free Flash Decompiler社区大使选拔流程&#xff1a;申请与评审完全指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款功能强大的Flash反编译…...

编程新知 2026/3/27 5:40:55

终极Markdown转换神器：浏览器中的写作革命指南

终极Markdown转换神器&#xff1a;浏览器中的写作革命指南 【免费下载链接】markdown-here Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. 项目地址: https://gitcode.com/gh_mirrors/ma/markdow…...

编程新知 2026/3/27 5:16:44

5大理由让你立即选择Argos Translate：开源离线翻译的终极解决方案

5大理由让你立即选择Argos Translate&#xff1a;开源离线翻译的终极解决方案 【免费下载链接】argos-translate Open-source offline translation library written in Python 项目地址: https://gitcode.com/GitHub_Trending/ar/argos-translate Argos Translate是一款…...

编程新知 2026/3/27 5:08:43

STM32HAL库项目实战：我把W5500和MQTTClient库‘缝’起来，实现了阿里云OTA升级前传

STM32HAL库与W5500深度整合&#xff1a;从MQTT云连接到OTA升级的工程实践 在嵌入式设备智能化浪潮中&#xff0c;远程固件升级(OTA)已成为工业设备的标配功能。本文将揭示如何基于STM32HAL库和W5500以太网芯片构建可靠的云连接通道&#xff0c;为后续OTA升级打下坚实基础。不同…...

编程新知 2026/3/27 4:58:22

功能齐全的屏幕截图C++实现详解（附源码）

目录 1、概述 2、屏幕截图的主要功能点 3、屏幕截图的主体实现思路 3.1、截图主窗口全屏置顶 3.2、桌面灰化 3.3、窗口自动套索 3.4、区域放大 3.5、截取区域的选择 3.5、截图工具条 3.6、矩形等图元的绘制 4、桌面灰化的实现细节 5、窗口自动套索实现 6、区域放大…...

编程新知 2026/3/27 4:50:05

半导体晶圆测量中的5大常见误区：从台阶仪到无图晶圆系统的避坑指南

半导体晶圆测量中的5大常见误区&#xff1a;从台阶仪到无图晶圆系统的避坑指南 在半导体制造领域&#xff0c;晶圆测量是确保器件性能与良率的关键环节。然而&#xff0c;即使是经验丰富的工程师&#xff0c;也常因忽视某些细节而陷入测量陷阱。本文将揭示五个最具隐蔽性的操作…...

编程新知 2026/3/27 3:15:02

闽北哥-柔弱胜刚强：真正的强者，从不硬碰

柔弱胜刚强 ——真正的强者&#xff0c;从不硬碰“为什么真正厉害的人&#xff0c; 看起来都有些柔弱&#xff1f;&#x1f33f; 因为—— 刚强自毁&#xff0c;柔弱长存。&#x1f52e; 这不是权谋&#xff0c; 而是—— 天地运行的铁律。”&#x1f30a; 一、误解千年&#x…...

编程新知 2026/3/27 2:48:46