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

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

news 2026/5/12 5:45:14

前两章介绍了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

黑莓印相≠复古滤镜！基于CIE Lab色域分析的Midjourney色彩空间偏移校准方案（附Python验证脚本）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;黑莓印相≠复古滤镜&#xff01;基于CIE Lab色域分析的Midjourney色彩空间偏移校准方案&#xff08;附Python验证脚本&#xff09; 黑莓印相&#xff08;Blackberry Print Tone&#xff09;常被误认为是…...

编程新知 2026/5/12 5:20:51

如何设计完美的 TypeScript 错误消息模拟测试数据：深入理解 pretty-ts-errors 测试策略 [特殊字符]

如何设计完美的 TypeScript 错误消息模拟测试数据&#xff1a;深入理解 pretty-ts-errors 测试策略 &#x1f50d; 【免费下载链接】pretty-ts-errors &#x1f535; Make TypeScript errors prettier and human-readable in VSCode &#x1f380; 项目地址: https://gitcode…...

编程新知 2026/5/12 5:14:31

FMCP协议：构建创作者统一文件管理中枢，打破应用孤岛

1. 项目概述&#xff1a;一个为创作者而生的文件管理中枢如果你是一位内容创作者&#xff0c;无论是视频剪辑师、摄影师、平面设计师&#xff0c;还是播客制作人&#xff0c;你的工作流里一定少不了与海量文件打交道。原始素材、工程文件、渲染输出、版本迭代……这些文件散落在…...

编程新知 2026/5/12 5:12:24

OSINT自动化框架openeir：模块化设计与情报收集流水线构建

1. 项目概述&#xff1a;一个面向开源情报的现代化工具箱最近在整理自己的技术栈时&#xff0c;发现一个挺有意思的项目&#xff0c;叫heyeir/openeir。乍一看这个名字&#xff0c;可能会有点摸不着头脑&#xff0c;但如果你对开源情报&#xff08;OSINT&#xff09;领域有所涉…...

编程新知 2026/5/12 4:37:15

德国工业4.0：从顶层设计到车间实践的制造业数字化转型

1. 工业4.0浪潮下的欧洲&#xff1a;一场由德国引领的深度变革提到德国制造&#xff0c;很多人脑海里蹦出来的词是“严谨”、“保守”甚至“刻板”。没错&#xff0c;德国人对于工业流程、制造工艺和质量标准的执着&#xff0c;有时近乎偏执。但正是这种对“传统”的极致坚守&a…...

编程新知 2026/5/12 2:03:04

别再乱用`return`了！深入理解Lua函数多返回值：`table.unpack`的妙用与尾调用优化

别再乱用return了&#xff01;深入理解Lua函数多返回值&#xff1a;table.unpack的妙用与尾调用优化 在游戏开发中&#xff0c;我们经常需要处理复杂的技能系统。比如一个火球术可能同时返回伤害值、燃烧效果、目标列表等多个数据。新手开发者往往会写出这样的代码&#xff1a;…...

编程新知 2026/5/12 0:09:21

ncmdump工具完全攻略：解锁网易云音乐NCM格式转换的终极指南

ncmdump工具完全攻略&#xff1a;解锁网易云音乐NCM格式转换的终极指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM加密格式无法在其他播放器播放而烦恼吗&#xff1f;你是否经历过精心收藏的音乐只能…...

编程新知 2026/5/11 23:45:23

大核小核架构的演进：从DVFS到异构计算，应对先进制程挑战

1. 项目概述&#xff1a;大核小核架构的十字路口在移动计算和嵌入式领域&#xff0c;ARM的“大核小核”&#xff08;big.LITTLE&#xff09;架构在过去十年里几乎成了高性能低功耗的代名词。从智能手机到平板电脑&#xff0c;再到如今的物联网边缘设备&#xff0c;这套将高性能…...

编程新知 2026/5/11 22:49:48

别再只复制粘贴了！深入理解阿里云IoT设备三元组（ProductKey/DeviceName/DeviceSecret）的安全与应用

阿里云IoT设备三元组安全实践指南&#xff1a;从基础认知到高级防护策略 在物联网项目开发中&#xff0c;设备身份认证是保障系统安全的第一道防线。许多开发者虽然能够快速完成设备接入&#xff0c;但对认证核心——设备三元组&#xff08;ProductKey/DeviceName/DeviceSecret…...

编程新知 2026/5/11 22:16:39

AD19原理图编译总报off grid pin警告？手把手教你从库源头搞定封装与栅格对齐

AD19原理图编译报off grid pin警告&#xff1f;从库源头解决封装与栅格对齐问题 每次在AD19中编译原理图时&#xff0c;看到那一长串的"off grid pin"警告&#xff0c;是不是感觉特别烦躁&#xff1f;这些看似无害的警告实际上可能隐藏着严重的设计隐患。作为一位经历…...

编程新知 2026/5/11 21:24:20