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

CSS中4种关系选择器

news 2026/5/9 3:20:09

元素(标签)之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

根据以上的关系，可以使用如下选择器

1:子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素{}

例如：div>span{},#root>.s1{}

2: 后代元素选择器：

作用：选中指定元素内的指定后代元素

语法：祖先 后代

例如：div .rou{}

3:选择下一个兄弟(紧紧挨着我的)

语法：前一个+下一个

例子：p+span

4:选择下面所有的兄弟(前面的不选)

语法：兄～弟

例子：p～span

<!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>/* 需求一：为div的子元素span设置一个字体颜色红色 */div > span {color: red;}/* 需求二：div里的span元素字体都变为30px */div .rou {font-size: 30px;}div > p > span {color: violet;}/* 需求三： 选择零食区，字体颜色变为blue*/p + span {color: blue;}p ~ span {background-color: tomato;}</style></head><body><div id="c1">我是超市<br /><span>我是零食区</span><p>我是生鲜区<span class="rou" id="">肉类</span></p><span>我是鞋包区</span><br /><span>我是洗护区</span></div><br /><span>我是超市外的小卖部</span></body>
</html>

相关文章：

CSS中4种关系选择器

元素(标签)之间的关系 父元素&#xff1a;直接包含子元素的元素 子元素&#xff1a;直接被父元素包含的元素 祖先元素&#xff1a;直接或间接包含后代元素的元素&#xff0c;父元素也是祖先元素 后代元素&#xff1a;直接或间接被祖先元素包含的元素&#xff0c;子元素也是后代…...

编程日记 2023/11/22 3:17:12

蓝牙模块（HC-05）与手机连接，蓝牙与蓝牙互联,电脑通过蓝牙控制单片机

任务一&#xff1a;蓝牙与手机连接 所用模块&#xff1a; HC-05蓝牙模块&#xff0c;USB TO TTL手机APP为SPP蓝牙串口 第一章&#xff1a;蓝牙模块配置 一&#xff1a;HC-05与USB TO TTL连接 EN&#xff1a;为使能引脚&#xff0c;一般不接 VCC&#xff1a;接USB TO TTL模…...

编程日记 2023/11/22 3:16:09

安装 eslint 配置指南 及 遇到的一些问题记录

前端eslint配置指南 背景 当前前端项目风格混乱&#xff0c;每个人有自己的开发习惯&#xff0c;有自己的格式化习惯&#xff0c;不便于项目的风格统一&#xff0c;不利于代码维护有的项目eslint没有用起来&#xff0c;没有起到规范代码的作用&#xff0c;导致出现一些基础代码…...

编程日记 2023/11/22 3:15:07

trzsz支持文件拖动到终端进行上传，类似lrzsz

考虑到 LapTop -> Host 1 -> Host 2 -> Docker -> TMUX&#xff0c;使用scp或sftp命令不方便&#xff1b;使用rz和sz命令就会方便很多&#xff0c;但是却又与 TMUX 不兼容&#xff08;备注&#xff1a;Tmux是一个终端复用工具&#xff0c;允许用户在一个终端窗口中…...

编程日记 2023/11/22 3:14:06

Doris DDL和DML

1 创建用户和数据库 1）创建test用户 mysql -h hadoop1 -P 9030 -uroot -p create user test identified by test; 2）创建数据库 create database test_db; 3）用户授权...

编程日记 2023/11/22 3:13:04

NewStarCTF2023 Reverse方向Week3 ez_chal WP

分析 题目&#xff1a;ez_chal 一个XTEA加密&#xff0c; V6是key&#xff0c;v5是输入&#xff0c;然后v7就是密文。 看了v6&#xff0c;要用动调。 ELF文件用ida的远程调试。 然后在kali上输入长度为32的flag 全部转换成dd 再提取密文。 EXP #include <stdio.h>…...

编程日记 2023/11/22 3:12:02

程序员如何“升级打怪”？我用了这几个“歪瓜”！

不会吧&#xff1f;不会吧&#xff1f;计算机本命专业出身、以及半路出家的&#xff0c;混了几年了&#xff0c;还在新手村&#xff1f;对得起这几年摸的鱼&#xff1f; 思考一下&#xff1a;如何从小白一跃为大师&#xff0c;从此走上人生巅峰、迎娶白富美&#xff1f;变强只…...

编程日记 2023/11/22 3:11:01

模具制造厂ERP都有哪些牌子?模具制造厂ERP有什么用

模具制造通常会涉及物料领用、成品入库、工艺流转、投入水口、配方、模具、生产啤数统计等众多环节&#xff0c;各个环节数据的实时和准确传递&#xff0c;有利于企业清晰掌握订单生产进度&#xff0c;及时调整制造策略等。 有些模具制造工厂采用传统的管理模式&#xff0c;随…...

编程日记 2023/11/22 3:09:59

FPGA语法相关知识合集

一.相关概念 1.四种结构说明语句 2.initial 与 always 的异同点 3.task 与 function 的3个不同点 4.task的语法结构(定义及调用) 5.function的语法结构(定义及调用) 6.function 的一个必须有和一个必须没有&#xff0c;使用规则 7.自动&#xff08;递归&#xff09;函数…...

编程日记 2023/11/22 3:08:56

2023年Java核心技术大会（Core Java Week 2023）-核心PPT资料下载

一、峰会简介 人工智能在22年、23年的再次爆发让Python成为编程语言里最大的赢家&#xff1b;云原生的持续普及令Go、Rust等新生的语言有了进一步叫板传统技术体系的资本与底气。我们必须承认在近几年里&#xff0c;Java阵营的确受到了前所未有的挑战&#xff0c;出现了更多更…...

编程日记 2023/11/22 3:07:54

Vue3 源码解读系列（十五）——编译

编译 web 模式的编译主要做了 3 件事&#xff1a; 解析 template 生成 ASTAST 转换生成代码 /*** web 编译* param {string} template - 待编译的模板字符串* param {string} options - 配置对象*/ function compile(template, options {}) {return baseCompile(template, …...

编程日记 2023/11/22 3:06:54

gitlab安装配置及应用

安装 ##安装依赖 yum install -y curl policycoreutils-python openssh-server perl#上传包 rz gitlab-jh-16.5.2-jh.0.el7.x86_64.rpm 安装 yum install gitlab-jh-16.0.3-jh.0.el7.x86_64.rpm 初始化并启动 # 以下两种方法都可以配置访问地址&#xff0c;第一种需要在yum安…...

编程日记 2023/11/22 3:05:53

Docker Volume: 实现容器间数据共享与持久化的利器

文章目录 Docker Volume的作用Docker Volume与容器内数据的比较优势劣势 Docker Volume的创建和管理创建Docker Volume管理Docker Volume 演示Docker Volume的挂载Docker Volume的生命周期安全性考虑与Docker Volume应用场景Docker Volume与多容器协作容器迁移与Docker Volume未…...

编程日记 2023/11/22 3:03:50

redis问题归纳

1.redis为什么这么快&#xff1f; &#xff08;1&#xff09;基于内存操作&#xff1a;redis的所有数据都存在内存中&#xff0c;因此所有的运算都是内存级别的&#xff0c;所以性能比较高 &#xff08;2&#xff09;数据结构简单&#xff1a;redis的数据结构是专门设计的&…...

编程日记 2023/11/22 3:01:49

改进YOLOv8：结合ConvNeXt V2骨干网络！使用MAE共同设计和扩展ConvNet

🗝️YOLOv8实战宝典--星级指南：从入门到精通，您不可错过的技巧   -- 聚焦于YOLO的 最新版本， 对颈部网络改进、添加局部注意力、增加检测头部，实测涨点 💡 深入浅出YOLOv8：我的专业笔记与技术总结   -- YOLOv8轻松上手， 适用技术小白，文章代码齐全，仅需 …...

编程日记 2023/11/22 3:00:47

基于SpringBoot+Vue的新能源汽车充电桩管理系统

基于SpringBootVue的新能源汽车充电桩管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 充电桩详情 管理员界面 摘要 本项目是基于Spring Boot 和 …...

编程日记 2023/11/22 2:59:46

Linux进程通信——消息队列

概念 消息队列&#xff0c;是消息的链接表&#xff0c;存放在内核中。一个消息队列由一个标识符(即队列ID)来标识。 特点 1.消息队列是面向记录的&#xff0c;其中的消息具有特定的格式以及特定的优先级。&#xff08;消息队列是结构体&#xff09; 2.消息队列独立于发送与接…...

编程日记 2023/11/22 2:56:41

ArcGIS教程——ArcGIS工具-按线分割面

功能说明 在ArcGIS数据处理过程中&#xff0c;有时需要沿线把面要素分割开&#xff0c;可以使用高级编辑中的分割面&#xff08;Cut Polygon&#xff09;工具。那么&#xff0c;如果要用线图层分割面图层该怎么办呢&#xff1f;地理遥感生态网平台开发了一个自定义模型工具。它…...

编程日记 2023/11/22 2:55:40

C语言进阶之冒泡排序

✨ 猪巴戒&#xff1a;个人主页✨ 所属专栏&#xff1a;《C语言进阶》 &#x1f388;跟着猪巴戒&#xff0c;一起学习C语言&#x1f388; 目录 前情回顾 1、回调函数 2、冒泡排序 3、库函数qsort cmp&#xff08;sqort中的比较函数&#xff0c;需要我们自定义&#xff09; …...

编程日记 2023/11/22 2:54:38

零代码编程：用ChatGPT将SRT字幕文件批量转为Word文本文档

一个文件夹中有多个srt视频字幕文件&#xff0c;srt文件里面有很多时间轴&#xff1a; 现在想将其批量转为word文档&#xff0c;去掉里面与字符无关的时间轴&#xff0c;在ChatGPT中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个批量将SRT字幕文件转为…...

编程日记 2023/11/22 2:53:37

Aegis-Veil：轻量级可编程应用安全中间件实战指南

1. 项目概述&#xff1a;一个面向开发者的安全防护工具 最近在梳理自己项目的安全配置时&#xff0c;又想起了之前用过的一个挺有意思的工具——Aegis-Veil。这名字听起来就很有“盾与面纱”的意味&#xff0c;直指其核心&#xff1a;为你的应用或服务提供一层坚固的防护&#…...

编程新知 2026/5/9 3:02:23

基于OpenTelemetry与Prometheus构建Claude Code可观测性监控体系

1. 项目概述&#xff1a;为Claude Code构建可观测性监控体系如果你正在使用Claude Code进行AI辅助编程&#xff0c;并且对它的使用成本、效率以及内部运行状态感到好奇&#xff0c;那么今天分享的这个项目正是为你准备的。我最近花了不少时间&#xff0c;基于OpenTelemetry、Pr…...

编程新知 2026/5/9 2:41:50

ChatGPT免费版数学暴涨24%，还藏了个语音大招

5月5号GPT-5.5 Instant上线&#xff0c;5月7号GPT-Realtime-2发布。 两天两发&#xff0c;一文本一语音。 免费用户直接拿到旗舰级智力&#xff0c;这事比跑分本身有意思。 ​ 不是阉割版&#xff0c;是旗舰智力配了极速响应 先说我判断变化的地方。 GPT-5.5 Instant刚发布时…...

编程新知 2026/5/9 2:29:29

基于RAG的智能论文管理工具paperbanana：从本地部署到高级应用全解析

1. 项目概述与核心价值最近在开源社区里&#xff0c;一个名为paperbanana的项目引起了我的注意。乍一看这个名字&#xff0c;你可能会觉得有点无厘头——“论文香蕉”&#xff1f;但当你深入了解后&#xff0c;会发现它精准地戳中了每一个从事大语言模型&#xff08;LLM&#x…...

编程新知 2026/5/9 2:16:04

ELDRS测试：保障航天电子器件长期可靠性的关键技术

1. 项目概述&#xff1a;理解太空环境下的电子可靠性挑战 在航空航天与国防领域&#xff0c;设计一款能在外太空稳定运行数十年的电子系统&#xff0c;其挑战远超地面应用。我们面对的并非仅仅是极端的温度、真空或振动&#xff0c;还有一个无形却无处不在的“杀手”——空间辐…...

编程新知 2026/5/9 0:30:21

SITS 2026前瞻：5个即将引爆产业的AI技术拐点，错过将落后至少18个月

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;2026年AI技术风向标&#xff1a;SITS大会前瞻 全球人工智能领域最具前瞻性的年度盛会——智能系统与可信智能峰会&#xff08;SITS 2026&#xff09;将于明年3月在上海张江科学城正式启幕。本届大会聚焦…...

编程新知 2026/5/9 0:23:51

第二部分-Docker核心原理——10. 容器网络原理

10. 容器网络原理 1. 容器网络概述 容器网络是 Docker 的核心组件之一&#xff0c;负责实现容器与容器、容器与宿主机、容器与外部的网络通信。Docker 通过 Linux 内核的网络命名空间、veth pair、网桥、iptables 等技术实现网络隔离和连通。 ┌───────────────…...

编程新知 2026/5/9 0:08:11

Matsumiko/runbook：代码化运维手册，实现故障处理自动化与知识沉淀

1. 项目概述&#xff1a;Runbook&#xff0c;运维的“作战手册”在运维和DevOps的世界里&#xff0c;我们每天都在和各种系统、服务、故障打交道。你有没有遇到过这样的场景&#xff1a;凌晨三点&#xff0c;线上服务突然告警&#xff0c;你睡眼惺忪地爬起来&#xff0c;面对复…...

编程新知 2026/5/8 23:43:19

从GitHub个人项目学习ChatGPT API集成与健壮性优化

1. 项目概述&#xff1a;一个被误解的“ChatGPT”仓库在GitHub上搜索“ChatGPT”&#xff0c;你会得到成千上万个结果。其中&#xff0c;一个名为HemulGM/ChatGPT的仓库&#xff0c;仅从标题来看&#xff0c;很容易让人误以为这是OpenAI官方客户端的开源实现&#xff0c;或者是…...

编程新知 2026/5/8 23:37:17

如何在Navicat中使用导出数据库完整数据字典_架构师必备技能

Navicat无法一键导出完整数据字典&#xff0c;需手动执行information_schema查询组合表结构、字段注释、索引及外键信息&#xff0c;再导出为Excel/CSV&#xff1b;注意字符集设为utf8mb4并选UTF-8编码&#xff0c;避免注释乱码或为空。导出 MySQL 数据库的完整数据字典&#x…...

编程新知 2026/5/8 22:14:40