【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>”
相关文章：
【css】组合器
组合器是解释选择器之间关系的某种机制。在简单选择器器之间，可以包含一个组合器，从而实现简单选择器难以达到的效果。 CSS 中有四种组合器： 后代选择器 (空格)：匹配属于指定元素后代的所有元素，示例：div …...
HTTPS、TLS加密传输
HTTPS、TLS加密传输 HTTPS、TLS加密传输1、HTTPS（HyperText Transfer Protocol Secure）2、TLS HTTPS、TLS加密传输 1、HTTPS（HyperText Transfer Protocol Secure） HTTPS（HyperText Transfer Protocol Secure&#x…...
docker frp 搭建 http + stcp 代理
所需服务器 2台 一台具有国外公网ip 一台具有国内 ip 内网外网都可以 外公网ip服务器配置如下 cat docker-compose.yamlversion: "2" services:frps:image: alpine:latesthostname: frpsrestart: alwayscontainer_name: frpsprivileged: trueuser: rootcommand: […...
项目出bug,找不到bug,如何拉回之前的版本
1.用gitee如何拉取代码 本文为转载于「闪耀太阳a」的原创文章原文链接：https://blog.csdn.net/Gufang617/article/details/119929145 怎么从gitee上拉取代码 1.首先找到gitee上想要拉取得代码URL地址 点击复制这里的https地址 1 ps:（另外一种方法&…...
vue-cli
vue-cli脚手架 案例一： 案例二： 案例三： 一、脚手架简介 Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程 1. …...
android获取屏幕分辨率的正确方法；获取到分辨率（垂直方向像素）的不正确
我通过下面的方法去获取屏幕分辨率的，但获取到的分辨率有时会不准确。原因是此方法有时候会忽略一些布局或控件的高度，从而得不到正确的高度。 public static String getDeviceResolution(Context context){//从系统服务中获取窗口管理器WindowManager w…...
机器学习笔记之优化算法(八)简单认识Wolfe Condition的收敛性证明
机器学习笔记之优化算法——简单认识Wolfe Condition收敛性证明 引言回顾： Wolfe \text{Wolfe} Wolfe准则准备工作推导条件介绍推导结论介绍 关于 Wolfe \text{Wolfe} Wolfe准则收敛性证明的推导过程 引言 上一节介绍了非精确搜索方法—— Wolfe \text{Wolfe} Wolf…...
通过win+r安装jupyter报错
通过pip install jupyter安装jupyter报错处理办法 1、python 更新到最新版，最好多执行几次后在安装jupyter python.exe -m pip install --upgrade pip 2、通过镜像安装 pip install jupyter --force-reinstall pip -i http://pypi.douban.com/simple/ --trusted-h…...
C#声明一个带返回值的委托
1、声明 public delegate string TestDel(string str); 2、使用 TestDel t; t (string str) > str; t (string str) > str "1"; t (string str) > str "2"; t (string str) > str "3"; Console.WriteLine(t ("hhhh&qu…...
Flutter 自定义view
带进度动画的圆环。没gif，效果大家自行脑补。 继承CustomPainter，paint()方法中拿到canvas，绘制API和android差不多。 import package:flutter/material.dart;class ProgressRingPainter extends CustomPainter {double strokeWidth 20;Col…...
Ubuntu新装系统报错：sudo: vim：找不到命令
问题： 新安装的老版本Ubuntu系统，发现在使用vim命令的时候报错： sudo：vim：找不到命令 解决办法 这是因为没有安装vim，直接运行下面命令安装vim sudo apt-get install vim...
Vue3自定义简单的Swiper滑动组件-触控板滑动鼠标滑动左右箭头滑动-demo
代码实现了一个基本的滑动功能，通过鼠标按下、鼠标松开和鼠标移动事件来监听滑动操作。 具体实现逻辑如下： 在 onMounted 钩子函数中，我们为滚动容器添加了三个事件监听器：mousedown 事件：当鼠标按下时，设置…...
三个主流数据库（Oracle、MySQL和SQL Server）的“单表造数
oracle 1.创建表 CREATE TABLE "YZH2_ORACLE" ("VARCHAR2_COLUMN" VARCHAR2(20) NOT NULL ENABLE,"NUMBER_COLUMN" NUMBER,"DATE_COLUMN" DATE,"CLOB_COLUMN" CLOB,"BLOB_COLUMN" BLOB,"BINARY_DOUBLE_COLU…...
TypeScript 中【class类】与 【 接口 Interfaces】的联合搭配使用解读
导读： 前面章节，我们讲到过 接口（Interface）可以用于对「对象的形状（Shape）」进行描述。 本章节主要介绍接口的另一个用途，对类的一部分行为进行抽象。 类配合实现接口 实现（impleme…...
JavaWeb 手写Tomcat底层机制
目录 一、Tomcat底层整体架构 1.简介 : 2.分析图 : 3.基于Socket开发服务端的流程 : 4.打通服务器端和客户端的数据通道 : 二、多线程模型的实现 1.思路分析 : 2.处理HTTP请求 : 3.自定义Tomcat : 三、自定义Servlet规范 1. HTTP请求和响应 : 1 CyanServletRequest …...
Gof23设计模式之组合模式
1.定义 组合模式又名部分整体模式，是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象，用来表示部分以及整体层次。这种类型的设计模式属于结构型模式，它创建了对象组的树形结构。 2.结构 组合模式主要包含三种…...
龙芯积极研发二进制翻译，提升软硬件兼容性，提高LoongArch架构
根据8月8日Phoronix报道，龙芯正在积极研发龙芯二进制翻译功能（Loongson Binary Translationm，LBT）以提高LoongArch架构与其他处理器（如MIPS/x86/Arm）的二进制翻译能力，这重要举措将显著提升龙芯…...
3天爆肝整理，自动化测试-YAML文件读写实战（超细总结）
目录：导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜） 前言 YAML 简介 YAML&…...
算法通关村——透彻理解二分查找
1. 循环法 public static int binarySearch(int[] arr, int low, int high, int target) {while (low < high) {// 这样写主要是避免溢出的情况，以及>>优先级小于，避免出现死循环int mid low ((high - low) >> 1);if (arr[mid] target…...
刷题指南 —— 第六弹（⭐有点难度⭐）)
PAT(Advanced Level)刷题指南 —— 第六弹（⭐有点难度⭐）
一、1010 Radix 1. 问题重述 2. Sample Input1 6 110 1 103. Sample Output1 24. Sample Input 2 1 ab 1 25. Sample Output 2...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成，核心是利用 HTTP 协议的 Range 请求头指定下载范围： 实现原理 Range 请求头：向服务器请求文件的特定字节范围（如 Range: bytes1024-） 本地文件记录：保存已…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...