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

CSS 父类元素的伪类选择器

news 来源：原创 2025/7/1 7:42:14

父元素的 :hover 状态可以影响子元素的样式。当父元素处于 :hover 状态时，可以通过 CSS 的选择器为子元素设置样式。

.parent:hover .child 这种选择器叫做 后代选择器（Descendant Selector） ，结合了 :hover 伪类。它的作用是：当父元素处于 :hover 状态时，选中其后代子元素并应用样式。

1. 原理

CSS 选择器的作用范围 ：
- CSS 中的后代选择器（如 .parent:hover .child）允许你基于父元素的状态来修改子元素的样式。
- 当父元素被悬停时，:hover 状态会被触发，进而可以通过选择器影响子元素的样式。
继承与作用域 ：
- 子元素不会直接继承父元素的 :hover 样式（如背景颜色、边框等），但可以通过明确的选择器定义子元素的样式变化。

2. 示例代码

HTML 结构

<div class="parent"><div class="child">我是子元素</div>
</div>

CSS 样式

/* 默认状态下 */
.parent {padding: 20px;background-color: lightgray;
}.child {padding: 10px;background-color: white;color: black;
}/* 父元素 hover 时 */
.parent:hover {background-color: darkgray; /* 修改父元素的背景色 */
}/* 父元素 hover 时，子元素的样式 */
.parent:hover .child {background-color: yellow; /* 修改子元素的背景色 */color: red; /* 修改子元素的文字颜色 */
}

效果

默认情况下，父元素和子元素都有各自的默认样式。
当鼠标悬停在父元素上时：
- 父元素的背景色变为深灰色。
- 子元素的背景色变为黄色，文字颜色变为红色。

3. 更复杂的嵌套结构

如果嵌套层级更深，也可以通过类似的方式控制更深层次的子元素。

HTML 结构

<div class="grandparent"><div class="parent"><div class="child">我是子元素</div></div>
</div>

CSS 样式

.grandparent:hover .child {background-color: lightblue; /* 悬停在祖父元素时，修改子元素的背景色 */
}

效果

当鼠标悬停在 .grandparent 上时，.child 的背景色会变为浅蓝色。

4. 注意事项

:hover 的作用范围 ：
- 只有当父元素本身被悬停时，子元素的样式才会受到影响。
- 如果鼠标直接悬停在子元素上，而没有触碰到父元素，则父元素的 :hover 不会生效。
避免样式冲突 ：
- 如果父元素和子元素都定义了 :hover 样式，可能会导致样式冲突。可以通过更具体的选择器或优先级来解决。
性能优化 ：
- 对于复杂的 DOM 结构，频繁的 :hover 样式可能会影响渲染性能。尽量避免对深层嵌套的子元素进行过多的动态样式修改。

5. 实际应用场景

1. 菜单展开效果

当鼠标悬停在菜单项上时，显示子菜单或改变子菜单的样式。

<ul class="menu"><li class="menu-item"><span>菜单项 1</span><ul class="submenu"><li>子菜单 1-1</li><li>子菜单 1-2</li></ul></li>
</ul>

CSS

.menu-item .submenu {display: none;
}.menu-item:hover .submenu {display: block; /* 鼠标悬停时显示子菜单 */
}

2. 卡片高亮效果

当鼠标悬停在卡片上时，改变卡片内容的样式。

<div class="card"><div class="card-title">标题</div><div class="card-content">内容</div>
</div>

.card:hover .card-title {color: blue; /* 鼠标悬停时改变标题颜色 */
}.card:hover .card-content {font-weight: bold; /* 鼠标悬停时加粗内容文字 */
}

6. 总结

父元素的 :hover 状态可以通过 CSS 选择器影响子元素的样式。
使用 .parent:hover .child 这样的选择器可以实现动态的父子元素联动效果。
在实际开发中，这种方式非常适合用于菜单展开、卡片交互等场景。
注意避免样式冲突，并优化复杂嵌套结构中的性能问题。

CSS 父类元素的伪类选择器

父元素的 :hover 状态可以影响子元素的样式。当父元素处于 :hover 状态时，可以通过 CSS 的选择器为子元素设置样式。 .parent:hover .child 这种选择器叫做后代选择器（Descendant Selector） ，结合了 :hover 伪类。它的作用是&…...

编程日记 2025/7/1 7:42:14

【Spring Boot 与 Spring Cloud 深度 Mape 之三】服务注册与发现：Nacos 核心实战与原理浅析

【Spring Boot 与 Spring Cloud 深度 Mape 之三】服务注册与发现：Nacos 核心实战与原理浅析 #SpringCloudAlibaba #Nacos #服务注册 #服务发现 #服务治理 #微服务 #SpringBoot #Java 系列衔接：在前两篇 [【深度 Mape 之一】和 [【深度 Mape 之二】] 中…...

编程日记 2025/6/28 2:28:33

JS实现动态点图酷炫效果

实现目标分析问题整个图主要是用canvas实现，其中难点是将线的长度控制在一定范围内、并且透明度随长度变化。前置知识 canvas绘制点、线、三角形、弧形 // 点ctx.moveTo(this.x, this.y);ctx.arc(this.x, this.y, this.r,0, 2 * Math.PI, false);ctx.fillStyle …...

编程日记 2025/6/27 10:51:29

使用ModbusRTU读取松下测高仪的高度

使用C#通过Modbus RTU读取松下测高仪高度 1. 准备工作 1.1 硬件连接确保松下测高仪支持Modbus RTU协议（需查阅设备手册确认）。通过RS-485或RS-232接口连接设备与计算机，可能需要USB转串口适配器。确认通信参数（波特率、数据位、停止位、奇偶校验），常见设置为：9600波特…...

编程日记 2025/6/28 4:25:31

SQL Server从安装到入门一文掌握应用能力。

本篇文章主要讲解，SQL Server的安装教程及入门使用的基础知识，通过本篇文章你可以快速掌握SQL Server的建库、建表、增加、查询、删除、修改等基本数据库操作能力。作者：任聪聪日期：2025年3月31日一、SQL Server 介绍： SQL Server 是微软旗下的一款主流且优质的数据库…...

编程日记 2025/6/28 3:10:32

Ubuntu上给AndroidStudio创建桌面图标

最近使用了Ubuntu开发了，默认的android studio没有桌面图标，还是很不方便，每次都要cd到bin目录启动studio.sh。步骤1：cd /usr/share/applications linux系统里面，所有的应用启动入口都在 /usr/share/applications …...

编程日记 2025/6/28 1:23:19

HarmonyOS：ComposeTitleBar 组件自学指南

在日常的鸿蒙应用开发工作中，我们常常会面临构建美观且功能实用的用户界面的挑战。而标题栏作为应用界面的重要组成部分，它不仅承载着展示页面关键信息的重任，还能为用户提供便捷的操作入口。最近在参与的一个项目里，我就深深体会…...

编程日记 2025/6/29 5:53:28

C# System.Net.Dns 使用详解

总目录前言在网络编程中，域名系统（DNS）是互联网的核心组成部分之一，它将人类可读的域名转换为机器可用的IP地址。在.NET框架中，System.Net.Dns类提供了一组静态方法，用于执行与DNS相关的操作。本文将详细…...

编程日记 2025/7/1 6:57:01

Spring-事务属性

1.隔离属性数据库对于隔离属性的支持隔离属性的值MySQLOracle ISOLATION.READ_COMMITTED √ √ ISOLATION.REPEATABLE_READ√ISOLATION.SERIALIZABLE√√ Oracle不支持REPEATABLE_READ值如何解决不可重复度采用的多版本比对的方式解决不可重复读默认隔离属性 ISO…...

编程日记 2025/6/28 1:23:10

“上云入端” 浪潮云剑指组织智能化落地“最后一公里”

进入2025年，行业智能体正在成为数实融合的核心路径。2025年初DeepSeek开源大模型的横空出世，通过算法优化与架构创新，显著降低算力需求与部署成本，推动大模型向端侧和边缘侧延伸。其开源策略打破技术垄断，结合边缘计算…...

编程日记 2025/6/28 1:23:11

Docker 的实质作用是什么

Docker 的实质作用是什么目录 Docker 的实质作用是什么**1. Docker 的实质作用****2. 为什么使用 Docker？****（1）解决环境一致性问题****（2）提升资源利用率****（3）简化部署与扩展****（4）加速开发与协作****3. 举例说明****总结**Docker 的实质是容器化平台，核心作用…...

编程日记 2025/6/28 3:16:44

WEB安全--文件上传漏洞--白名单绕过

一、MIME类型（Content-Type）绕过原理：在我们不能绕过白名单后缀限制时，如果后端检测的是文件类型（数据包中的Content-Type字段），那我们可以利用合法类型替换示例：在上传,php后缀…...

编程日记 2025/6/27 12:55:37

Mac 本地化部署 dify

Macbook 本地化部署 dify 目录 Macbook 本地化部署 dify安装dockerdocker下载地址安装dify下载dify到本地github可能遇到的问题: github打开超时在本地解压dify.zip文件本地化部署docker部署可能遇到的问题: 部署超时登录体验 dify 安装docker docker下载地址根据电脑芯片选…...

编程日记 2025/6/28 6:32:37

MySQL和navicat日常使用记录

navicat界面上之前跟localhost连接的数据库可以直接点开了这里有excel导入的地方然后添加文件，选则文件是哪个，勾选excel的表是哪个，根据实际情况定义一些附加选项，注意时间格式，下一步下一步，然后选择主…...

编程日记 2025/6/30 12:20:18

linux进程信号 ─── linux第27课

在 Linux 系统中，信号（Signals） 是一种进程间通信（IPC）机制，用于通知进程发生了某种事件或请求进程执行特定操作。你怎么能识别信号呢？识别信号是内置的，进程识别信号，是…...

编程日记 2025/6/28 2:22:53

云安全之k8s未授权漏洞总结

一、k8s介绍全称是 kubernetes，是谷歌在2014年推出的一种开源容器编排系统，后来捐赠给了云原生计算基金会（CNCF）。因将k后面的8个字母进行缩写后，被广泛简称为K8s。随着容器技术的发展，面临着容器数量庞大…...

编程日记 2025/6/29 13:46:45

博客学术汇测试报告

Author：MTingle major:人工智能 Build your hopes like a tower! 目录一.项目简介二.开发技术三.测试用例设计四.自动化测试代码 common包博客编辑博客列表登录页面未登录测试主函数五.性能测试六.测试总结一.项目简介该项目是一款基于 S…...

编程日记 2025/6/28 3:38:00

揭秘：父子组件之间的传递

基础知识组件与组件之间有三大方面的知识点： 子组件通过props defineProps（{}）接收父组件传递到参数和方法；子组件可以通过定义 emit 事件，向父组件发送事件；父组件调用子组件通过defineExpose 导出的方法…...

编程日记 2025/6/27 21:44:47

leetcode 169.Majority Element

这道题虽然简单，但适合用来练习各种解法。《剑指offer》5.2节面试题29与此题一样，并且给出了leetcode官方题解未给出的快速选择的解法。方法一、用哈希表解决 class Solution { public:int majorityElement(vector<int>& nums) {unordered…...

编程日记 2025/6/28 1:57:39

魔改chromium——基础环境搭建

谷歌chromium环境要求详细文档软件和环境要求，必须安装，硬性要求系统环境：Windows 10，内存最小8GB，推荐16GB，NTFS格式磁盘最少100GB空间Git版本：安装最新版本即可，Git桌面端下载…...

编程日记 2025/6/28 1:31:23

[网络_1] 因特网 | 三种交换 | 拥塞 | 差错 | 流量控制

目录一、网络、互连网与因特网二、因特网发展三、因特网的组成与功能四、计算机网络的分类五、因特网的标准化与意义一、三种传输方式：电路交换 vs 报文交换 vs 分组交换 1. 电路交换（Circuit Switching）——像“打电话” 2. 报…...

编程日记 2025/6/28 4:49:36

android 何如查找内网设备 IP

前沿最近在与嵌入式设备打交道，需要对设备进行配网。发现 UpnP 服务不稳定，经常收不到设备的信息。就想着能不能通过内网查找到 IP 后，直接与设备通信，不停的请求设备信息。 1.Android 端通过 UDP 组播（Multicast）查找设备如果嵌入式设备支持 UDP 组播，Android 端可…...

编程日记 2025/6/28 4:47:05

Oracle数据库数据编程SQL＜3.5 PL/SQL 存储过程(Procedure)＞

存储过程(Stored Procedure)是 Oracle 数据库中一组预编译的 PL/SQL 语句集合，存储在数据库中并可通过名称调用执行。它们是企业级数据库应用开发的核心组件。目录一、存储过程基础 1. 存储过程特点 2. 创建基本语法 3. 存储过程优点 4. 简单示例二、没有…...

编程日记 2025/6/30 7:53:37

六级词汇量积累day13

commend 表扬 exhaust 耗尽，用尽 weary 疲惫的，劳累的 fatigue 疲惫，劳累 obese 臃肿的，肥胖的 adopt 采纳，收养 adapt 适应 accomplish 完成，实现 accomplishment 成就 achieve 实现，完成 achi…...

编程日记 2025/6/28 6:35:33

将所有1x1转化为2x2 即1x1的方块➗4 然后计算平方数记得-1 2 import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter;public class Main{static BufferedReader in new BufferedReader(new In…...

编程日记 2025/6/29 12:43:11

OpenCV图像输入输出模块imgcodecs（imwrite函数的用法）

《OpenCV计算机视觉开发实践：基于Python（人工智能技术丛书）》(朱文伟，李建英)【摘要书评试读】- 京东图书 3.2.3 imwrite保存图片函数imwrite可以用来输出图像到文件，其声明如下： imwrite(filename,…...

编程日记 2025/7/1 0:23:27

win 远程 ubuntu 服务器安装图形界面

远程结果：无法使用docker环境使用此方法注意要写IP和:数字在 ubuntu 服务器上安装如下： # 安装 sudo apt-get install tightvncserver # 卸载 sudo apt purge tightvncserver sudo apt autoremove#安装缺失的字体包： sudo apt update s…...

编程日记 2025/6/28 4:08:44

地下管线三维建模软件工具MagicPipe3D V3.6.1

经纬管网建模系统MagicPipe3D，基于二维矢量管线管点数据本地离线参数化构建地下管网三维模型（包括管道、接头、附属设施等），输出标准3DTiles、Obj模型等格式，支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、…...

编程日记 2025/7/1 4:08:53

vue子组件生命周期的执行顺序

在 Vue 中，子组件的生命周期钩子函数的执行顺序受父组件的影响，通常遵循**“先创建子组件，后创建父组件；先销毁父组件，后销毁子组件”**的原则。 1. 组件创建（挂载）阶段当父组件挂载时&#x…...

编程日记 2025/6/30 4:38:30

【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统

项目介绍本课程演示的是一款基于微信小程序的在线考试与选课教学辅助系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统…...

编程日记 2025/7/1 4:47:39

树莓派超全系列文档--(17)树莓派配置显示器

树莓派配置显示器显示支持 HDMI 显示器设置分辨率和旋转手动设置分辨率和旋转确定显示设备名称设置自定义分辨率设置自定义旋转控制台分辨率和旋转文章来源： http://raspberry.dns8844.cn/documentation 原文网址显示要配置 Raspberry Pi 使用非默认显示模式…...

编程日记 2025/6/29 15:15:39

python将pdf文件转为图片，如果pdf文件包含多页，将转化的多个图片通过垂直或者水平合并成一张图片

要将PDF文件转换为图片，并将多页PDF垂直合并成一张图片，可以使用PyMuPDF（也称为fitz）库来读取PDF文件，并使用Pillow库来处理和合并图片。以下是一个示例代码，展示了如何实现这个功能： 首先&…...

编程日记 2025/6/28 1:31:30

JVM基础原理

JVM是一个虚拟化的计算机，它可以执行Java字节码文件（.class文件），实现Java程序跨平台的特性。JVM负责将Java程序的字节码翻译成具体操作系统的机器码，从而能够在不同的平台上运行。JVM的核心原理涉及以下几个重要方面 …...

编程日记 2025/6/30 23:29:57

Miniforge3高效管理 Python环境：2025年最新实践指南

Miniforge3 高效管理 Python 环境：2025 年最新实践指南在现代开发中，灵活高效地管理 Python 环境至关重要。Miniforge3 作为一款轻量级 Conda 管理工具，不仅默认采用更新更快的 conda-forge 软件源，还对 ARM 架构（例如 Apple M1/M2/M3）有着出色的适配性。相比于传统的 …...

编程日记 2025/6/28 4:24:39

31天Python入门——第17天:初识面向对象

你好，我是安然无虞。文章目录面向对象编程1. 什么是面向对象2. 类(class)3. 类的实例关于self 4. 对象的初始化5. __str__6. 类之间的关系继承关系组合关系 7. 补充练习面向对象编程 1. 什么是面向对象面向对象编程是一种编程思想,它将现实世界的概念和关系映…...

编程日记 2025/6/28 21:43:25

困于环中的机器人

************* c topic: 1041. 困于环中的机器人 - 力扣（LeetCode） ************* Inspect the topic first. And it looks really familiar with another robot topic. 657. 机器人能否返回原点 - 力扣（LeetCode）https://lee…...

编程日记 2025/6/29 8:35:27

阿里 FunASR 开源中文语音识别大模型应用示例（准确率比faster-whisper高）

文章目录 Github官网简介模型安装非流式应用示例流式应用示例 Github https://github.com/modelscope/FunASR 官网 https://www.funasr.com/#/ 简介 FunASR是一个基础语音识别工具包，提供多种功能，包括语音识别（ASR）、语音端…...

编程日记 2025/6/28 5:28:02

spring boot前后端开发上传文件时报413(Request Entity Too Large)错误的可能原因及解决方案

可能原因及解决方案 1. Spring Boot默认文件大小限制原因：Spring Boot默认单文件最大为1MB，总请求体限制为10MB。解决方案： 在application.properties中配置：spring.servlet.multipart.max-file-size10MB # 单文件最大 spring…...

编程日记 2025/6/28 1:30:37

Transformer：破局山地暴雨预测的「地形诅咒」--AI智能体开发与大语言模型的本地化部署、优化技术

极端降雨预测的技术痛点与边缘破局 1. 传统预警系统的三重瓶颈‌ ‌延迟致命‌：WRF模式在1km分辨率下3小时预报耗时>45分钟，错过山洪黄金响应期 ‌地形干扰大‌：复杂地形区（如横断山脉）降水预测误差超50% ‌数据…...

编程日记 2025/6/28 3:20:51

游戏引擎学习第187天

看起来观众解决了上次的bug 昨天遇到了一个相对困难的bug，可以说它相当棘手。刚开始的时候，没有立刻想到什么合适的解决办法，所以今天得从头开始，逐步验证之前的假设，收集足够的信息，逐一排查可能的原因&a…...

编程日记 2025/6/28 4:34:14

05-02-自考数据结构（20331）- 动态查找-知识点

自考数据结构动态查找算法主要讲二叉树和平衡二叉树，但是感觉到了，就又续接了一部分，所以这篇备考的小伙伴着重看前两种就可以了。知识拓扑知识点介绍二叉排序树(BST) 定义二叉排序树(Binary Search Tree)又称二叉查找树，它或者是一棵空树，或者是具有下列性质的二…...

编程日记 2025/6/28 1:23:14

PyQt6实例_批量下载pdf工具_使用pyinstaller与installForge打包成exe文件

目录前置： 步骤： step one 准备好已开发完毕的项目代码 step two 安装pyinstaller step three 执行pyinstaller pdfdownload.py，获取初始.spec文件 step four 修改.spec文件，将data文件夹加入到打包程序中 step five 增加…...

编程日记 2025/6/28 1:23:18

NVR接入录像回放平台EasyCVR视频融合平台城市/乡镇污水处理厂解决方案

一、方案背景随着经济的快速发展和城市化的加快，城市污水排放量急剧增加，给城市环境和粮食安全带来了威胁。因此，污水处理厂的建设和高效运营成为对城市环境保护的重要任务。目前，国内许多城市虽已建成污水处理系统&#xff0…...

编程日记 2025/6/28 1:30:36

Vue2 vs Vue3 生命周期全面对比：created 的进化与革新！！！

🎯 Vue2 vs Vue3 生命周期全面对比：created 的进化与革新 🔥 核心差异全景图一、钩子函数命名与定位变化 1. 命名规范革新 Vue2 钩子Vue3 钩子 (Options API)Vue3 Composition APIbeforeCreate❌ 无setup() 替代created✅ 保留setup() 替代…...

编程日记 2025/6/28 6:36:00

Ubuntu 22.04安装MongoDB：GLM4模型对话数据收集与微调教程

在Ubuntu 22.04安装MongoDB Community Edition的教程请点击下方链接进行参考： 点击这里获取MongoDB Community Edition安装教程今天将为大家带来如何微调GLM4模型并连接数据库进行对话的教程。快跟着小编一起试试吧~ 1. 大模型 ChatGLM4 微调步骤 1.1 从 github…...

编程日记 2025/6/28 4:01:42