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

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

news 2026/4/2 12:49:25

文章目录

  • 一、子元素选择器
    • 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、集合主要分了两组&#xff08;单列集合&#xff0c;双列集合&#xff09; 2、Collection接口有两个重要的子…...

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

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

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

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

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

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

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

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

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

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

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

项目场景&#xff1a; 基于YOLOv5的室内场景识别 工具&#xff1a;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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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开源代码官方&#xff1a;https://gith…...

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

Maven专题总结—详细版

第一章 为什么使用Maven 获取jar包 使用Maven之前&#xff0c;自行在网络中下载jar包&#xff0c;效率较低。如【谷歌、百度、CSDN…】使用Maven之后&#xff0c;统一在一个地址下载资源jar包【阿里云镜像服务器等…】 添加jar包 使用Maven之前&#xff0c;将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. 函数 函数是一种重复代码的抽象方式&#xff0c;Python 内建支持的一种封装&#xff1b; 调用函数 调用一个函数&#xff0c;需要知道函数…...

编程日记 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&#xff1a;静态资源 1.1&#xff1a;静态资源访问 1.2&#xff1a;静态资源源码解析-到WebMvcAutoConfiguration 2&#xff1a;Rest请求绑定&#xff08;设置put和delete&#xff09; 2.1&#xff1a;代码实例 2.2&#xff1a;源码分析到-WebMvcAutoConfiguratio…...

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

4-2 Linux进程和内存概念

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

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

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

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

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

别再只调参了！深入DeepSORT的tracker.py：从轨迹管理到状态机，看懂跟踪器如何‘思考’

深入DeepSORT的tracker.py&#xff1a;从轨迹管理到状态机&#xff0c;看懂跟踪器如何‘思考’ 在目标跟踪领域&#xff0c;调试模型时遇到的ID频繁切换、轨迹断裂等问题往往令人头疼。许多开发者虽然能够跑通DeepSORT算法&#xff0c;但当需要针对特定场景优化时&#xff0c;却…...

编程新知 2026/4/2 12:31:57

Ostrakon-VL扫描终端部署案例：单卡A10G跑通全任务链（上传→推理→终端输出）

Ostrakon-VL扫描终端部署案例&#xff1a;单卡A10G跑通全任务链&#xff08;上传→推理→终端输出&#xff09; 1. 项目背景与价值 在零售与餐饮行业&#xff0c;每天需要处理大量商品识别、货架巡检等重复性视觉任务。传统方案通常面临两个痛点&#xff1a;一是专业级识别系…...

编程新知 2026/4/2 12:09:28

2025届必备的十大降重复率工具实测分析

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 用于学术论文、科研报告以及各类文档&#xff0c;提供查重与改写服务的在线工具是降重网站。…...

编程新知 2026/4/2 12:05:27

物理动力学系统的强化学习：一种替代方法

原文&#xff1a;towardsdatascience.com/rl-for-physical-dynamical-systems-an-alternative-approach-8e2269dc1e79?sourcecollection_archive---------1-----------------------#2024-07-28 重新引入遗传算法并与神经网络进行比较 https://medium.com/retter_42511?sourc…...

编程新知 2026/4/2 11:32:44

Python使用DrissionPage实现自动化处理的简单入门指南

在Python自动化领域&#xff0c;Selenium和Requests是两个常用工具&#xff0c;但各有局限。DrissionPage巧妙结合了两者优势&#xff0c;既能用浏览器自动化处理动态页面&#xff0c;又能通过HTTP请求提升效率。本文将带你从零开始&#xff0c;用10分钟掌握DrissionPage的核心…...

编程新知 2026/4/2 11:22:40

PyTorch 2.8镜像实操手册：基于40G数据盘的视频生成训练环境搭建

PyTorch 2.8镜像实操手册&#xff1a;基于40G数据盘的视频生成训练环境搭建 1. 环境准备与快速部署 在开始视频生成训练之前&#xff0c;我们需要先准备好硬件环境和镜像部署。本镜像专为RTX 4090D显卡优化&#xff0c;配备了24GB显存和CUDA 12.4支持&#xff0c;能够高效处理…...

编程新知 2026/4/2 8:09:55

别再傻傻分不清了！手把手教你选对安规电容（X1/X2/Y1/Y2等级详解）

电子工程师必读&#xff1a;安规电容X/Y等级实战选型指南 当你在设计一款家用空气净化器的开关电源时&#xff0c;突然发现EMC测试总是不达标&#xff1b;当你维修一台工业变频器时&#xff0c;发现安规电容爆裂导致设备瘫痪——这些场景背后&#xff0c;往往隐藏着对X1/X2/Y1/…...

编程新知 2026/4/2 7:04:57

FireRedASR-AED-L本地化教程：国产统信UOS/麒麟系统全兼容部署方案

FireRedASR-AED-L本地化教程&#xff1a;国产统信UOS/麒麟系统全兼容部署方案 提示&#xff1a;本教程已在统信UOS 20、麒麟V10系统完成实测验证&#xff0c;同样适用于Ubuntu、CentOS等Linux发行版 1. 项目简介&#xff1a;为什么选择这个工具&#xff1f; 如果你正在寻找一个…...

编程新知 2026/4/2 6:34:38

Intv_AI_MK11 服务端错误处理：全面应对 403 Forbidden 等常见 HTTP 状态码

Intv_AI_MK11 服务端错误处理&#xff1a;全面应对 403 Forbidden 等常见 HTTP 状态码 1. 为什么需要关注API错误处理 在调用Intv_AI_MK11这类AI服务API时&#xff0c;开发者经常会遇到各种HTTP状态码返回。这些状态码就像是服务端给你的"小纸条"&#xff0c;告诉你…...

编程新知 2026/4/2 6:10:24

Qwen3.5-9B-AWQ-4bit惊艳效果展示：高清图识+中文摘要真实生成作品集

Qwen3.5-9B-AWQ-4bit惊艳效果展示&#xff1a;高清图识中文摘要真实生成作品集 1. 模型能力概览 Qwen3.5-9B-AWQ-4bit是一款让人眼前一亮的视觉理解模型&#xff0c;它能像人类一样"看懂"图片内容&#xff0c;并用流畅的中文给出专业分析。这个模型特别擅长处理各种…...

编程新知 2026/4/2 5:27:48