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

CSS详细基础(三)复合选择器

前两章介绍了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;对基本选择器进行组合形…...

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

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

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

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

讲讲项目里的仪表盘编辑器(二)

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

文心一言 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;可…...

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缓存…...

Java包装类与自动拆箱装箱

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

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

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

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

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

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

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

蓝桥等考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?( …...

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

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

pandas--->CSV / JSON

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

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

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

二、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;有什么特点…...

DevSecOps 将会嵌入 DevOps

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

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

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

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

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

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;效率机制…...

Docker Dockerfile解析

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

浏览器从输入URL到页面展示这个过程中都经历了什么

一. URL输入 URL是统一资源定位符&#xff0c;用于定位互联网上的资源&#xff0c;俗称网址。我们在地址栏输入网址后敲下回车&#xff0c;浏览器会对输入的信息进行以下判断&#xff1a; 1. 检查输入的内容是否是一个合法的URL连接 2. 如果合法的话&#xff0c;则会判断URL…...

2023-09-22 monetdb-事务管理-乐观并发控制-记录

摘要: 2023-09-22 monetdb-事务管理-记录 相关文档: Transaction Management | MonetDB Docs https://en.wikipedia.org/wiki/Optimistic_concurrency_control monetdb事务管理: MonetDB/SQL 支持以 START TRANSACTION 标记并以 COMMIT 或 ROLLBACK 关闭的多语句事务方案。如果…...

蓝桥等考Python组别四级008

第一部分:选择题 1、Python L4 (15分) 字符“D”的ASCII码值比字符“F”的ASCII码值小( )。 1234正确答案:B 2、Python L4 (15分) 下面的Python变量名正…...

SpringMVC 学习(二)Hello SpringMVC

3. Hello SpringMVC (1) 新建 maven 模块 springmvc-02-hellomvc (2) 确认依赖的导入 (3) 配置 web.xml <!--web/WEB-INF/web.xml--> <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee…...

交换机之间配置手动|静态链路聚合

两台交换机&#xff0c;配置链路聚合&#xff1a; 1、禁止自动协商速率&#xff0c;配置固定速率 int G0/0/1 undo negotiation auto speed 100int G0/0/2 undo negotiation auto speed 100 2、配置eth-trunk int eth-trunk 1 mode manual | lacp-staticint G0/0/1 eth-trun…...

Shiro高级及SaaS-HRM的认证授权

Shiro在SpringBoot工程的应用 Apache Shiro是一个功能强大、灵活的&#xff0c;开源的安全框架。它可以干净利落地处理身份验证、授权、企业会话管理和加密。越来越多的企业使用Shiro作为项目的安全框架&#xff0c;保证项目的平稳运行。 在之前的讲解中只是单独的使用shiro&…...

eclipse svn插件安装

1.进入eclipse的help->Eclipse Marketplace,如下图所示&#xff1a; 2.输入“svn”,再按回车&#xff0c;如下图&#xff1a; 3.这我选择的是 Subversive,点击后面的“install”按钮&#xff0c;如下图 Eclipse 下连接 SVN 库有两种插件 —— Subclipse 与 Subversive &…...

C语言 cortex-A7核 UART总线 实验

一、C 1&#xff09;uart4.h #ifndef __UART4_H__ #define __UART4_H__ #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_uart.h&quo…...

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

不同走向地下管线的地质雷达响应特征分析 前言 以PVC管线为例&#xff0c;建立不同走向&#xff08;水平倾斜、垂直倾斜、水平相邻&#xff09;的三维管线地质模型&#xff0c;进行三维地质雷达数据模拟&#xff0c;分析不同走向地下管线的地质雷达响应特征。 文章目录 不同…...

Nginx负载均衡详解

一、负载均衡介绍 1、负载均衡的定义 单体服务器解决不了并发量大的请求&#xff0c;所以&#xff0c;我们可以横向增加服务器的数量&#xff08;集群&#xff09;&#xff0c;然后将请求分发到各个服务器上&#xff0c;将原先请求集中到单个服务器上的情况改为将请求分发到多…...

重庆网站页面优化/女生seo专员很难吗为什么

《Kotlin核心编程》阅读笔记第八章 元编程程序和数据什么是元编程常见的元编程技术Kotlin的反射kotlin和Java 反射koltin的KClasskotlin的KCallable获取参数信息Kotlin 注解无处不在的注解精准控制注解位置获取注解信息第八章 元编程 Java的反射只是元编程的一种方式。 示例&a…...

wordpress页面显示返回json/福州seo公司排名

因为是刚开始使用框架&#xff0c;连接数据库报了一堆错&#xff0c;所以上网搜了很多的相关教程&#xff0c;还是没解决问题&#xff0c;后来才发现是两个很简单的问题&#xff1a;一个是连接数据库的url的端口是3306&#xff0c;和tomcat的8080弄混了&#xff0c;一直写的808…...

政府网站系统统一/厦门seo公司到1火星

关键字&#xff1a;身份证识别、二代证识别、二代身份证识别、OCR、Android身份证识别、IOS身份证识别、身份证扫描识别、身份证拍照识别 应用背景 随着智能终端&#xff08;智能手机及平板电脑&#xff09;及移动 通信&#xff08;3G&#xff09;的发展&#xff0c;原来运行在…...

合肥网站建设制作价格/图床外链生成工具

中国质量新闻网2006年的一篇报道&#xff0c;1把失准钢卷尺&#xff0c;导致损失数10万元钱。计量器具是保障建筑工程质量的一个重要因素&#xff0c;只有加强计量工作&#xff0c;才是对人民生命财产的最大负责。 在工业产品的生产中&#xff0c;一件不合格的量具能使成批产品…...

域名停靠app大全下载网站入口/腾讯企点qq

Python做为一个脚本语言&#xff0c;可以很方便地写各种工具。当你在服务端要运行一个工具或服务时&#xff0c;输入参数似乎是一种硬需&#xff08;当然你也可以通过配置文件来实现&#xff09;。 如果要以命令行执行&#xff0c;那你需要一个命令行参数解析的模块来帮你做这个…...

如何选择wordpress主机/强强seo博客

2019独角兽企业重金招聘Python工程师标准>>> 什么是Shell脚本&#xff1f; Shell脚本&#xff08;英语Shellscript&#xff09;是一种电脑程序与文本文件内容由一连串的shell命令组成经由UnixShell直译其内容后运作被当成是一种脚本语言来设计其运作方式与直译语言相…...