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

CSS中4种关系选择器

news 2026/2/19 17:39:22

元素(标签)之间的关系

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

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

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

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

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

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

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2026/2/17 18:29:14

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2026/2/18 17:27:43

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/18 3:42:22

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/2/17 16:14:58

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/2/15 21:39:41

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/2/12 0:57:35

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17