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

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

news 2025/9/16 3:58:51

文章目录

一、子元素选择器
- 1、语法说明
- 2、代码分析
- 3、代码示例
二、交集选择器
- 1、语法说明
- 2、代码示例

一、子元素选择器

1、语法说明

子元素选择器可以选择某个基础选择器选择出的元素组的直接子元素 ( 亲儿子元素 ) 中使用基础选择器选择元素 ;

子元素选择器语法 : 父选择器写在前面 , 子选择器写在后面 , 两个选择器之间使用 > 大于号隔开 ;

父选择器>子选择器 {属性名称1:属性值1;属性名称2:属性值2;属性名称3:属性值3;
}

注意 : 子选择器只能从父选择器选择出的标签的亲儿子元素中选择元素 ;

子选择器只能从父选择器选择出的元素的亲儿子元素中选择 , 孙子元素和重孙子元素选择不到 ;

CSS 基础选择器 :

标签选择器
类选择器
ID 选择器
通配符选择器

2、代码分析

在下面的代码中 ,

div > label {color: blue;
}

父选择器是 div , 这是标签选择器 , 选择出了 div 标签 , 在 div 标签的字标签中 , 选择 label 标签 ,

下面的标签中 , div 标签的子标签是 label 标签 , 因此将该 label 标签选择出来 , 设置为蓝色 ;

		<div><label>div 子元素</label></div>

下面的标签中 , div 标签的字标签是 p 标签 , 没有 label 标签 , 因此没有可选择的元素 , 孙子标签不在子元素选择器范围之内 ;

<div><p><label>div 孙子元素</label></p>
</div>

3、代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en"><head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>/* 只能选 div 下的子元素的 label 标签, 不能选孙子标签 */div > label {color: blue;}</style></head><body><div><label>div 子元素</label></div><div><p><label>div 孙子元素</label></p></div></body>
</html>

执行结果 :
在这里插入图片描述

二、交集选择器

1、语法说明

交集选择器由两个基础选择器组成 , 目的是选择出同时满足两个基础选择器要求的标签 ;

交集选择器语法 : 两个基础选择器之间没有空格 ;

基础选择器1基础选择器2 {属性名称1:属性值1;属性名称2:属性值2;属性名称3:属性值3;
}

CSS 基础选择器 :

标签选择器
类选择器
ID 选择器
通配符选择器

2、代码示例

下面是交集选择器 , 获取 p标签选择器与 .red类选择器交集元素标签 ;

		/*交集选择器 p标签选择器 与 .red类选择器 交集元素*/p.red {color: red;}

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>Google</title><base target="_blank"/><style>/*交集选择器 p标签选择器 与 .red类选择器 交集元素*/p.red {color: red;}</style>
</head>
<body><p class="red">红色</p><p class="red">红色</p><div class="red">红色</div><div class="red">红色</div>
</body>
</html>

执行结果 :

在这里插入图片描述

【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )

文章目录一、子元素选择器1、语法说明2、代码分析3、代码示例二、交集选择器1、语法说明2、代码示例一、子元素选择器 1、语法说明子元素选择器可以选择某个基础选择器选择出的元素组的直接子元素 ( 亲儿子元素 ) 中使用基础选择器选择元素 ; 子元素选择器语法 : 父选…...

编程日记 2023/5/12 21:05:50

Java集合专题

文章目录框架体系CollectionListArrayListLinkedListVectorSetHashSetLinkedHashSetTreeSetMapHashMapHashtableLinkedHashMapTreeMapPropertiesCollections框架体系 1、集合主要分了两组（单列集合，双列集合） 2、Collection接口有两个重要的子…...

编程日记 2023/5/12 21:05:48

双重差分法（DID）：算法策略效果评估的利器

文章目录算法评估DID原理简单实例Python实现算法评估作为一名算法出身的人，曾长期热衷于算法本身的设计和优化。至于算法的效果评估，通常使用公开数据集做测试，然后对比当前已公开的结果，便可得到结论。但是在实际落地过程中&…...

编程日记 2023/5/12 21:05:44

【pytorch】使用mixup技术扩充数据集进行训练

目录1.mixup技术简介2.pytorch实现代码，以图片分类为例1.mixup技术简介 mixup是一种数据增强技术，它可以通过将多组不同数据集的样本进行线性组合，生成新的样本，从而扩充数据集。mixup的核心原理是将两个不同的图片按照一定的比例…...

编程日记 2023/5/12 21:05:41

面向对象设计模式：创建型模式之单例模式

1. 单例模式，Singleton Pattern 1.1 Definition 定义单例模式是确保类有且仅有一个实例的创建型模式，其提供了获取类唯一实例（全局指针）的方法。单例模式类提供了一种访问其唯一的对象的方式，可以直接访问&#xf…...

编程日记 2023/5/12 21:05:37

IsADirectoryError: [Errno 21] Is a directory: ‘.‘

项目场景： 基于YOLOv5的室内场景识别工具：colab 问题描述 Traceback (most recent call last): File “train.py”, line 630, in main(opt) File “train.py”, line 494, in main d torch.load(last, map_location‘cpu’)[‘opt’] File “/usr/…...

编程日记 2023/5/12 21:05:33

判断三角面片与空间中球体是否相交

文章目录一、问题描述二、解题思路在做项目时遇到了一个数学问题，即，如何判断给定一个三角面片与空间中某个球体有相交部分？这个问题看似简单，实际处理起来需要一些方法和手段。一、问题描述已知空间中球体的球心位置center&a…...

编程日记 2023/5/12 21:05:30

继承下的缺省参数值和访问说明符

前言本文将介绍 C 继承体系下，函数缺省参数的绑定和函数访问说明符的绑定。这些奇怪的问题实际上不应在我们的代码中出现，但它们能帮助我们理解 C 的动态绑定和静态绑定，也能帮助我们更好的通过面试。缺省参数值先来看一段代码&#xf…...

编程日记 2023/5/12 21:05:26

Spring核心模块—— BeanFactoryPostProcessorBeanPostProcessor（后处理器）

后置处理器前言Spring的后处理器BeanFactoryPostProcessor（工厂后处理器）执行节点作用基本信息经典场景子接口——BeanDefinitiRegistryPostProcessor基本介绍用途具体原理例子——注册BeanDefinition使用Spring的BeanFactoryPostProcessor扩展点完成自定…...

编程日记 2023/5/12 21:05:22

产品新人如何培养产品思维？

什么是产品思维？其实很难定义，不同人有不同的定义。有的人定义为以用户为中心打磨一个完美体验的产品；有的定义为从需求调研到需求上线各个步骤需要思考的点，等等。本文想讨论的产品思维是：怎么去发现问题，…...

编程日记 2023/5/12 21:05:18

「兔了个兔」CSS如此之美，看我如何实现可爱兔兔LOADING页面（万字详解附源码）

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后…...

编程日记 2023/5/12 21:05:14

【Java】阻塞队列 BlcokingQueue 原理、与等待唤醒机制condition/await/singal的关系、多线程安全总结

在实习过程中使用阻塞队列对while sleep 轮询机制进行了改造，提升了发送接收的效率，这里做一点点总结。自从Java 1.5之后，在java.util.concurrent包下提供了若干个阻塞队列，BlcokingQueue继承了Queue接口，是线程安全…...

编程日记 2023/5/12 21:05:09

【水下图像增强】Enhancing Underwater Imagery using Generative Adversarial Networks

原始题目Enhancing Underwater Imagery using Generative Adversarial Networks中文名称使用 GAN 增强水下图像发表时间2018年1月11日平台ICRA 2018来源University of Minnesota, Minneapolis MN文章链接https://arxiv.org/abs/1801.04011开源代码官方：https://gith…...

编程日记 2023/5/12 21:05:04

Maven专题总结—详细版

第一章为什么使用Maven 获取jar包使用Maven之前，自行在网络中下载jar包，效率较低。如【谷歌、百度、CSDN…】使用Maven之后，统一在一个地址下载资源jar包【阿里云镜像服务器等…】添加jar包使用Maven之前，将jar复制到项目工程…...

编程日记 2023/5/12 21:05:00

华为OD机试真题Java实现【字符串加密】真题+解题思路+代码（20222023）

字符串加密题目给你一串未加密的字符串str，通过对字符串的每一个字母进行改变来实现加密，加密方式是在每一个字母str[i]偏移特定数组元素a[i]的量，数组a前三位已经赋值：a[0]=1,a[1]=2,a[2]=4。当i>=3时，数组元素a[i]=a[i-1]+a[i-2]+a[i-3]，例如：原文 abcde …...

编程日记 2023/5/12 21:04:57

「Python 基础」函数与高阶函数

文章目录1. 函数调用函数定义函数函数的参数递归函数2. 高阶函数map/reducefiltersorted3. 函数式编程返回函数匿名函数装饰器偏函数1. 函数函数是一种重复代码的抽象方式，Python 内建支持的一种封装； 调用函数调用一个函数，需要知道函数…...

编程日记 2023/5/12 21:04:50

DIV内容滚动，文字符滚动标签marquee兼容稳定不卡

marquee(文字滚动)标签 marquee简介 <marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。 <marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scr…...

编程日记 2023/5/12 21:04:46

SpringBoot_第五章(Web和原理分析）

目录 1：静态资源 1.1：静态资源访问 1.2：静态资源源码解析-到WebMvcAutoConfiguration 2：Rest请求绑定（设置put和delete） 2.1：代码实例 2.2：源码分析到-WebMvcAutoConfiguratio…...

编程日记 2023/5/12 21:04:40

4-2 Linux进程和内存概念

文章目录前言进程状态进程优先级内存模型进程内存关系前言进程是一个其中运行着一个或多个线程的地址空间和这些线程所需要的系统资源。一般来说，Linux系统会在进程之间共享程序代码和系统函数库，所以在任何时刻内存中都只有代码的一份拷贝。进程状态…...

编程日记 2023/5/12 21:04:37

【微信小程序】计算器案例

🏆今日学习目标：第二十一期——计算器案例 ✨个人主页：颜颜yan_的个人主页 ⏰预计时间：30分钟 🎉专栏系列：我的第一个微信小程序计算器前言实现效果实现步骤wxmlwxssjs数字按钮事件处理函数计算按钮处理事…...

编程日记 2023/5/12 21:04:32

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2025/9/15 5:20:27

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/9 10:12:05

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

【Go】3、Go语言进阶与依赖管理

前言本系列文章参考自稀土掘金上的【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes&#xff0…...

编程新知 2025/7/11 5:22:11

智能AI电话机器人系统的识别能力现状与发展水平

一、引言随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机配置虚拟机飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/9/2 23:16:23

Python 实现 Web 静态服务器（HTTP 协议）

目录一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...

编程新知 2025/9/7 2:24:50

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三，HubSpot宣布已构建与ChatGPT的深度集成，这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋，但同时也存在一些关于数据安全的担忧。许多网络声音声称，这对SaaS应用程序和人工智能而言是一场范式转变。但向任何技…...

编程新知 2025/9/4 3:13:15

软件工程期末复习

瀑布模型：计划螺旋模型：风险低原型模型: 用户反馈喷泉模型:代码复用高内聚低耦合：模块内部功能紧密模块之间依赖程度小高内聚：指的是一个模块内部的功能应该紧密相关。换句话说，一个模块应当只实现单一的功能…...

编程新知 2025/9/9 10:07:00

文章目录

一、子元素选择器

1、语法说明

2、代码分析

3、代码示例

二、交集选择器

1、语法说明

2、代码示例

相关文章：