【css】组合器

组合器是解释选择器之间关系的某种机制。在简单选择器器之间,可以包含一个组合器,从而实现简单选择器难以达到的效果。

CSS 中有四种组合器:

  • 后代选择器 (空格):匹配属于指定元素后代的所有元素,示例:div p 选择div元素后代中的p,包括它的子孙十八代

  • 子选择器 (>) :指定元素子元素的所有元素。div > p,选择div元素下的子元素,只包括子元素

  • 相邻兄弟选择器 (+) :相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”

  • 通用兄弟选择器 (~):通用兄弟选择器匹配属于指定元素的同级元素的所有元素

1、后代选择器 (空格)

匹配属于指定元素后代的所有元素,示例:div p 选择div元素后代中的p,包括它的子孙十八代

代码:

<style>
div p {background-color: yellow;
}
</style>
</head>
<body><div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>

后代选择器选择的元素的所有符合的后代元素,包括子孙十八代,上面的代码中"div 段落 3"的 p也被选择中,这一点和后面的子选择器最大的区别。

渲染效果:
在这里插入图片描述

**2、子选择器 (>) **

指定元素子元素的所有元素。div > p,选择div元素下的子元素,只包括子元素

代码:

<style>
div > p {background-color: yellow;
}
</style>
</head>
<body>
<div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>

“div 段落 3”属于孙子p,在子选择器中不被选中。
渲染效果:
在这里插入图片描述

3、相邻兄弟选择器 (+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”

代码:

<style>
div + p {background-color: yellow;
}
</style>
</head>
<body>
<div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>

渲染效果:相邻兄弟选择器强调的事“紧随其后”的,div元素同级一级并且紧随其后的是“<p>段落 4。不在 div 中。</p>”。
在这里插入图片描述

4、通用兄弟选择器 (~)

通用兄弟选择器匹配属于指定元素的同级元素的所有元素

代码:

<style>
div ~ p {background-color: yellow;
}
</style>
</head>
<body><div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>

渲染效果:与div同级并且是p的就包括“<p>段落 4。不在 div 中。</p>”和“<p>段落 5。不在 div 中。</p>

在这里插入图片描述

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

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

相关文章

GWJDN-400型2MHZ自动平衡高温介电温谱仪

GWJDN-400型2MHZ自动平衡高温介电温谱仪 关键词&#xff1a;介电常数&#xff0c;高温介电&#xff0c;自动平衡 主要功能&#xff1a; 材料介电常数测试仪 半导体材料的介电常数、导电率和C-V特性液晶材料:液晶单元的介电常数、弹性常数等C-V特性 性能特点: 温度&#xf…

【CSS】说说响应式布局

目录 一、是什么 二、怎么实现 1、媒体查询 2、百分比 3、vw/vh 4、小结 三、总结 一、是什么 响应式设计简而言之&#xff0c;就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 响应式网站常见特点&#xff1a; 同时适配PC 平板 手机等…

chrome插件开发实例03-使用 chrome.storage API永久保存数据

目录 防止数据丢失 使用chrome.storage API 功能 功能演示 源代码 manifest.json popup.html

yxBUG记录

1、 原因&#xff1a;前端参数method方法名写错。 2、Field ‘REC_ID‘ doesn‘t have a default value 问题是id的生成问题。 项目的表不是自增。项目有封装好的方法。调用方法即可。 params.put("rec_id",getSequence("表名")) 3、sql语句有问题 检…

Docker 快速安装 MinIO

概述 MinIO 是一款基于Go语言的高性能对象存储服务&#xff0c;非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等。 拉取docker镜像 docker pull minio/minio创建宿主机数据目录&#xff08;共享数据卷&#xff09; 此…

Django进阶

1.模板 1.1 寻找html模板 TEMPLATES [{BACKEND: django.template.backends.django.DjangoTemplates,DIRS: [os.path.join(BASE_DIR, templates)],APP_DIRS: True,OPTIONS: {context_processors: [django.template.context_processors.debug,django.template.context_process…

【IDEA + Spark 3.4.1 + sbt 1.9.3 + Spark MLlib 构建鸢尾花决策树分类预测模型】

决策树进行鸢尾花分类的案例 背景说明&#xff1a; 通过IDEA Spark 3.4.1 sbt 1.9.3 Spark MLlib 构建鸢尾花决策树分类预测模型&#xff0c;这是一个分类模型案例&#xff0c;通过该案例&#xff0c;可以快速了解Spark MLlib分类预测模型的使用方法。 依赖 ThisBuild /…

会这个Python的测试员,工作都不会太差!

Python语言得天独厚的优势使之在业界的火热程度有增无减&#xff0c;尤其是在经历了互联网&#xff0c;物联网&#xff0c;云计算&#xff0c;大数据&#xff0c;人工智能等浪潮的推动下&#xff0c;其关注度&#xff0c;普适度一路走高。 对于测试人员来说&#xff0c;很多人…

科技感响应式管理系统后台登录页ui设计html模板

做了一个科技感的后台管理系统登录页设计&#xff0c;并且尝试用响应式布局把前端html写了出来&#xff0c;发现并没有现象中的那么容易&#xff0c;chrome等标准浏览器都显示的挺好&#xff0c;但IE11下面却出现了很多错位&#xff0c;兼容起来还是挺费劲的&#xff0c;真心不…

编程导航算法村第九关 | 二分查找

编程导航算法村第九关 | 二分查找 LeetCode852.这个题的要求有点啰嗦&#xff0c;核心意思就是在数组中的某位位置i开始&#xff0c;从0到i是递增的&#xff0c;从i1 到数组最后是递减的&#xff0c;让你找到这个最高点。 详细要求是&#xff1a;符合下列属性的数组 arr 称为山…

Linux系统中redis基础

本节主要学习redis的概述&#xff0c;安装目录结构&#xff0c;命令解析和redis登录更改&#xff0c;数据库的操作&#xff0c;和redis的持久化。 目录 一、概述 二、安装 1.编译安装 2.rpm安装 三、目录结构 四、命令解析 五、redis登陆更改 问题 解决办法 六、数据…

P11-Transformer学习1.1-《Attention Is All You Need》

Transformer目录:《Transformer Paper》1.0 CV Transformer必读论文5篇_汉卿HanQ的博客-CSDN博客 前文参考:Transformer1.0-预热_汉卿HanQ的博客-CSDN博客 全文1w3字左右&#xff0c;按照论文翻译个人理解精读&#xff0c;如果对你有所帮助&#xff0c;欢迎点个赞哦&#xff…

MQTT消息传输过程,网络断开后,断线重连及订阅消息恢复

1&#xff0c;首先要在网络失败的地方进行client重连 2&#xff0c;一定要设置发送超时&#xff0c;默认是-1&#xff0c;是不断进行发送的&#xff0c;会被长阻塞在这里&#xff0c;单位是ms 3&#xff0c;参考链接 https://vimsky.com/examples/detail/java-method-org.ec…

揭秘无人机在水利行业中如何应用

无人机的应用已经成为现代科技的重要组成部分&#xff0c;在水利行业中&#xff0c;无人机的应用同样发挥了极其重要的作用。无人机在水利行业中的应用&#xff0c;不仅提高了工作效率&#xff0c;还极大地降低了人力和物力成本&#xff0c;为水利工作注入了新的活力。 一、无人…

2023集成电路产业发展与产教融合高峰论坛会议顺利举行

8月5日&#xff0c;由中国半导体行业协会和市政府共同主办&#xff0c;天水师范学院、天水华天科技股份有限公司、杭州加速科技有限公司承办的2023集成电路产业发展与产教融合高峰论坛在天水举行。天水市委书记冯文戈&#xff0c;教育部学生服务与素质发展中心副主任方伟&#…

Flutter父宽度自适应子控件的宽度

需求&#xff1a; 控件随着金币进行自适应宽度 image.png 步骤&#xff1a; 1、Container不设置宽度&#xff0c;需要设置约束padding&#xff1b; 2、文本使用Flexible形式&#xff1b; Container(height: 24.dp,padding: EdgeInsetsDirectional.only(start: 8.dp, end: 5.d…

【知识图谱】图数据库Neo4jDesktop的安装图文详解(小白适用)

neo4j 的安装需要有jdk环境的支持。因此在安装Neo4j之前&#xff0c;需要安装Java JDK。 一.安装JDK 参考文章https://blog.csdn.net/weixin_41824534/article/details/104147067?spm1001.2014.3001.5502 二.Neo4j下载 进入Neo4j官网 选择下载中心 下滑选择Neo4j Deskto…

【学习笔记】生成式AI(ChatGPT原理,大型语言模型)

ChatGPT原理剖析 语言模型 文字接龙 ChatGPT在测试阶段是不联网的。 ChatGPT背后的关键技术&#xff1a;预训练&#xff08;Pre-train&#xff09; 又叫自监督式学习&#xff08;Self-supervised Learning&#xff09;&#xff0c;得到的模型叫做基石模型&#xff08;Founda…

redis与MongoDB的区别

1.Redis与MongoDB的概念 1.1 MongoDB MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB …

TS学习02-接口

接口 ts原则之一就是对值所具有的结构进行类型检查。 结构的左右就是为了这些类型命名和代码定义契约 interface LabelValue {label: string } function point(label: LabelValue) {} let obj {label:标题&#xff0c;age: 18} point(obj)类型检查器不会去检查属性的顺序&a…