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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/90841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElementUI之动态树+数据表格+分页

目录 前言 一.ElementUI之动态树 1.前端模板演示 2.数据绑定 2.1 通过链接获取后台数据 2.2 对链接进行绑定 2.3添加动态路由 2.4 配置路由 3.效果演示 二.数据表格动态分页 1.前端模板 2.通过JS交互获取后端数据 3 效果演示 前言 Element UI 是一个基于 Vue.js 的开…

IDEA Debug技巧大全,看完就能提升工作效率

作者简介 目录 1.行断点 2.方法断点 3.异常断点 4.字段断点 5.条件表达式 1.行断点 行断点就是平时我们在代码行旁边单击鼠标打上的断点&#xff0c;这个没有什么好说的。关键点在于很多人不知道的&#xff0c;行断点其实是可以右击选择是对改行的全部调用都生效&#xf…

缓存一致性(cache coherency)解决方案:MESI 协议状态转换详解

MESI 协议 一&#xff0c;MESI状态释义二&#xff0c;MESI状态转换1 Invalid after Reset2, Invalid > Exclusive3, Exclusive > Modified4 Modified > Shared, Invalid > Shared5 Shared > Invalid, Shared > Modified 三&#xff0c;状态转换场景总结Inval…

Go语言strconv包

strconv包 参考资料 常用函数 函数功能备注Atoi(s string) (int, error)string转为intItoa(i int) stringint转为stringIsPrint(r rune) bool查询是否可以打印 了解函数 函数功能备注ParseBool(str string) (value bool, err error)返回字符串表示的bool值。它接受1、0、t…

最新影视视频微信小程序源码-带支付和采集功能/微信小程序影视源码PHP(更新)

源码简介&#xff1a; 这个影视视频微信小程序源码&#xff0c;新更新的&#xff0c;它还带支付和采集功能&#xff0c;作为微信小程序影视源码&#xff0c;它可以为用户 提供丰富的影视资源&#xff0c;包括电影、电视剧、综艺节目等。 这个小程序影视源码&#xff0c;还带有…

Vue之ElementUI实现登陆及注册

目录 ​编辑 前言 一、ElementUI简介 1. 什么是ElementUI 2. 使用ElementUI的优势 3. ElementUI的应用场景 二、登陆注册前端界面开发 1. 修改端口号 2. 下载ElementUI所需的js依赖 2.1 添加Element-UI模块 2.2 导入Element-UI模块 2.3 测试Element-UI是否能用 3.编…

APScheduler包——python tornado框架中实现定时任务

介绍&#xff1a; APScheduler的全称是Advanced Python Scheduler。它是一个轻量级的 Python 定时任务调度框架。APScheduler 支持三种调度任务&#xff1a;固定时间间隔&#xff0c;固定时间点&#xff08;日期&#xff09;&#xff0c;Linux 下的 Crontab 命令。同时&#xf…

IOTE 2023盛况回顾,美格智能聚连接之力促数字新生长

9月20~22日&#xff0c;IOTE国际物联网展深圳站在深圳国际会展中心正式召开。本届展会以“IoT构建数字经济底座”为主题&#xff0c;聚焦物联网技术助推数字经济发展的核心动力。美格智能携前沿技术成果亮相展会&#xff0c;与参展观众深入交流。 展会上&#xff0c;美格智能带…

TCP/IP网络江湖——数据链路层的防御招式(数据链路层下篇:数据链路层的安全问题)

目录 引言 一、 数据链路层的隐私与保密 二、数据链路层的安全协议与加密

SpringCloud Gateway--Predicate/断言(详细介绍)中

&#x1f600;前言 本篇博文是关于SpringCloud Gateway–Predicate/断言&#xff08;详细介绍&#xff09;中&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以…

人工智能AI知多少?

摘要 人工智能(Artificial Intelligence,简称AI)是一项前沿技术,正在快速发展并渗透到各个领域。然而,对于大多数人来说,人工智能仍然是一个陌生而复杂的概念。本文旨在对人工智能进行扫盲,介绍其基本概念、应用领域以及当前热门的人工智能模型。通过具体的例子,读者将…

electron之快速上手

前一篇文章已经介绍了如何创建一个electron项目&#xff0c;没有看过的小伙伴可以去实操一下。 接下来给大家介绍一下electron项目的架构是什么样的。 electron之快速上手 electron项目一般有两个进程&#xff1a;主进程和渲染进程。 主进程&#xff1a;整个项目的唯一入口&…

大数据flink篇之一-基础知识

一、起源 2010至2014年间&#xff0c;由柏林工业大学、柏林洪堡大学和哈索普拉特纳研究所联合发起名Stratosphere的研究项目。2014年4月&#xff0c;项目贡献给Apache基金会&#xff0c;成为孵化项目。更名为Flink2014年12月&#xff0c;成为基金会顶级项目2015年9月&#xff…

分析一段js加密代码

源代码 (function(){var KBP,EbW482-471;function wHY(r){var y2043987;var lr.length;var a[];for(var g0;g<l;g){a[g]r.charAt(g)};for(var g0;g<l;g){var vy*(g289)(y%39401);var ty*(g287)(y%31258);var xv%l;var pt%l;var ma[x];a[x]a[p];a[p]m;y(vt)%2251814;};re…

搭建自己的搜索引擎之五

一、前言 接上文 搭建自己的搜索引擎之四&#xff0c;下面继续介绍茴香豆茴字的另外两种写法。 二、Jest Jest是ES的Java Http Rest客户端&#xff0c;它主要是为了弥补以前ES自有API缺少HttpRest接口客户端的不足&#xff0c;但因为现在ES官方已经提供了RestClient ,该项目已…

JIT介绍

JIT全称&#xff1a;Just in time。中文译为&#xff1a;即时的、实时的。 JVM中的这项技术名为&#xff1a;实时编译技术&#xff0c;也叫即时编译技术。就是在java程序运行的过程中&#xff0c;将字节码编译为机器码运行在本地&#xff0c;而不是通过JVM解释运行&#xff08;…

C++ -- 特殊类设计

目录 设计一个类&#xff0c;不能被拷贝 C98的做法 C11的做法 设计一个类&#xff0c;只能在堆上创建对象 实现方式1 实现方式2 设计一个类&#xff0c;只能在栈上创建对象 实现方式1 方式1的优化 实现方式2 设计一个类&#xff0c;不能被继承 设计模式 什么是设计…

正则表达式在java里的运用

文章目录 前言一、什么是正则表达式&#xff1f;二、使用步骤1.判断数字2.判断包含某个字符串 总结 前言 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器学习这门技术也越来越重要&#xff0c;很多人都开启了学习机器学习&#xff0c;本文就介绍了机器学习的基础内容…

计算机竞赛 深度学习实现行人重识别 - python opencv yolo Reid

文章目录 0 前言1 课题背景2 效果展示3 行人检测4 行人重识别5 其他工具6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的行人重识别算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c…

Linux 安全 - Capabilities机制

文章目录 前言一、简介二、Capabilities list2.1 POSIX-draft defined capabilities2.2 Linux-specific capabilities 三、 Past and current implementation四、Thread capability sets五、File capabilities六、Transformation of capabilities during execve()七、Capabilit…