1.CSS的复合选择器
1.1 什么是复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。
复合选择器可以更精准、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器
1.2 后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 （样式声明）
上述语法表示选择元素1里面的所有元素2（后代元素）。
例如
ul li { 样式声明}/*选择ul里面所有的li标签元素*/
- 元素1和元素2中间用空格隔开。
- 元素1是父级，元素2是子级，最终选择的是元素2
1.3 子选择器（重要）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是亲儿子元素。
语法：
元素1>元素2（样式声明）
上述语法表示选择元素1里面的所有直接后代（子元素）元素2
例如：
div>p{样式声明}/*选择div里面所有最近一级p标签元素*/
元素1和元素2中间大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙子都不管，也可以称为亲儿子选择器
课堂练习：
1.请将下面的链接文字改为红色。
<div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度</a></li>
</ul>
</div>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav ul li a{color: red;}</style>
</head>
<body><div class="nav"><ul><li><a href="#">百度</a></li><li><a href="#">百度</a></li></ul></div>
</body>
</html>2.请将下面的大肘子文字修改为红色。
<div class="hotdiv">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
答案：
.hotdiv>a{
color: red;
}
1.4 并集选择器（重要）
并选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1，元素{样式声明}
上述语法表示选择元素1和元素2.
例如：
ul,div{样式声明}/*选择ul和div标签元素*/
元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,p,.pig li{color: pink;}
/* 约定的语法规范，我们并集选择器喜欢竖着写 */
/* 一定要注意，最后一个选择器不需要加逗号 */</style>
</head>
<body><div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li></ul>
</body>
</html>
1.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如:hover，:first-child。
因为伪类选择器有很多，比如有链接伪类、结构伪类等，所以这里休闲给大家讲解常用的链接伪类选择器。
1.6 链接伪类选择器
/* a:link 选择所有未被访问的李连杰 */
/* a:visited 选择所有已被访问的链接 */
/* a:hover 选择鼠标指针位于其上的链接 */
/* a:active 选择活动链接（鼠标按下未弹起的链接） */
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a:link {color: black;text-decoration: none;}a:visited {color: orange;}a:hover {color: skyblue;}a:active {color: green;}</style>
</head>
<body><a href="#">小猪佩奇</a><a href="www.xxxx">未知网站</a>
</body>
</html>链接伪类选择器注意事项
1.为了确保生效，请按照LVHA的遵顺序声明:link->visted->hover->active
2.记忆法：love hate /ly包包hao
3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
平时开发都是这么写：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* a:link {color: black;text-decoration: none;}a:visited {color: orange;}a:hover {color: skyblue;}a:active {color: green;} */a{color: black;text-decoration: none;}a:hover {color: skyblue;text-decoration:underline;}</style>
</head>
<body><a href="#">小猪佩奇</a><a href="www.xxxx">未知网站</a>
</body>
</html>1.7 ：focus伪类选择器
:focus伪类选择器用于获取焦点的表单元素。
焦点就是光标，一般情况下，<inout>类表单元素才能获取，因此这个选择器也主要是针对表单元素来说的。
input:foucus{
background-color:yellow;
}
练习代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input:focus {background-color: pink;color: red;}</style>
</head>
<body><input type="text"><input type="text"><input type="text">
</body>
</html>1.8复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a:hover 实际开发的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
相关文章：
1.CSS的复合选择器
1.1 什么是复合选择器 在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。 复合选择器可以更精准、更高效的选择目标元素（标签） 复…...
sys.dm_exec_connections：查询与 SQL Server 实例建立的连接有关的信息以及每个连接的详细信息（客户端ip）
文章目录 引言I 基于dm_exec_connections查询客户端ip权限物理联接时间范围dm_exec_connections表see also: 监视SQL Server 内存使用量资源信号灯 DMV sys.dm_exec_query_resource_semaphores（ 确定查询执行内存的等待）引言 查询历史数据库客户端ip应用场景： 安全分析缺乏…...
gitee 使用教程
前言 Gitee 是一个中国的开源代码托管平台，类似于 GitHub，旨在为开发者提供一个高效、稳定、安全的代码管理和协作开发环境。Gitee 支持 Git 协议，可以托管 Git 仓库，进行版本控制、代码协作、项目管理等操作。 1. Gitee 的主要…...
HTMLHTML5革命：构建现代网页的终极指南 - 0. 课程目录设计
结构清晰，层层递进 课程从基础知识（如HTML学前必知）开始，逐步深入到高级应用（如PWA配置和WebApp优化）。每个模块都有明确的目标，适合零基础学员逐步掌握HTML。 覆盖范围广 这套课程涵盖了HTM…...
嵌入式系统 （2.嵌入式硬件系统基础）
2.嵌入式硬件系统基础 2.1嵌入式硬件系统的组成 嵌入式硬件系统以嵌入式微处理器为核心，主要由嵌入式微处理器、总线、存储器、输入/输出接口和设备组成。 嵌入式微处理器 嵌入式微处理器采用冯诺依曼结构或哈佛结构：前者指令和数据共享同一存储空间…...
Vue3轮播图的实现：vue3-carousel的使用和配置
vue3-carousel 是一个用于 Vue 3 的轻量级、响应式、功能强大的轮播组件。它允许你轻松创建可以滚动的图片或内容滑块。下面是关于如何安装、使用以及配置 vue3-carousel 的一些示例和详细说明。 目录 一、安装 vue3-carousel 二、引入 三、轮播全局样式修改 一、安装 vue3-…...
Spring AI ectorStore
Spring AI中的VectorStore是一种用于存储和检索高维向量数据的数据库或存储解决方案，它在AI应用中扮演着至关重要的角色。以下是对Spring AI VectorStore的详细解析： 一、VectorStore的基本概念 定义：VectorStore特别适用于处理那些经过嵌入…...
uniapp vue2版本如何设置i18n
如何设置i18n在该软件设置过语言的情况下优先选择所设置语言，在没有设置的情况下，获取本系统默认语言就，将系统默认语言设置为当前选择语言。 1、下载依赖： npm install vue-i18n --save 2、创建相关文件（在最外层&…...
)
【2024华为OD-E卷-100分-boss的收入】（题目+思路+JavaC++Python解析)
题目描述 题目：boss的收入 在一个公司中，有一个老板（boss）和若干名员工（employees）。老板和员工的收入信息存储在一个数组中，其中数组的每个元素表示一个人的收入。数组的第0个元素表示老板的…...
若依 ruoyi-vue HandlerInterceptor 拦截器 文件接口自定义权限
文件资源添加自定义权限 package com.huida.framework.config;import com.huida.framework.interceptor.FileInterceptor; import com.huida.framework.interceptor.RequestInterceptor; import org.springframework.beans.factory.annotation.Autowired; import org.springfr…...
在离线环境中安装 `.rpm` 包的步骤
在一些环境中，可能无法直接通过网络安装软件包。特别是在没有互联网连接的情况下，我们仍然可以手动下载 .rpm 安装包并进行离线安装。本文将介绍如何在离线环境中安装多个 .rpm 包，确保软件的顺利安装和依赖关系的处理。 1. 将 .rpm 文件复制…...
Python----Python爬虫（selenium的使用，定位元素，层级定位）
一、介绍与安装 Selenium是一个Web的自动化测试工具，最初是为网站自动化测试而开发的，类型像我们玩游戏用的按键精灵，可以按指定的命令自动操作，不同是Selenium 可以直接运行在浏览器上，它支持所有主流的浏览器。 Sele…...
Docker 服务、镜像、容器之命令（Docker Services, Images, and Container Commands）
Docker 服务、镜像、容器之命令 Docker是一个强大的容器化平台，能够帮助开发者高效地构建、部署和管理应用程序。本文将详细介绍Docker的服务命令、镜像命令和容器命令，帮助你快速上手Docker。 一、Docker的服务相关命令 在使用Docker之前，…...
当歌 - RSS 订阅分发平台开发
以下将详细介绍当歌平台的技术架构、功能实现以及相关代码逻辑。 一、项目概述 当歌是一个极简的 RSS 订阅分发平台，旨在为用户提供便捷的 RSS 管理和订阅服务，帮助用户轻松获取和分享最新资讯。 二、技术架构 后端语言：PHP 数据库&#…...
历程[二])
vue3使用AntV X6 (图可视化引擎)历程[二]
通过h函数动态展示自定义节点内容 一、案例效果 二、案例代码 父组件. BloodTopology.vue <template><div><TopologyCompact><template #main-board-box><TopologyDependent domId"featureBloodContainer" :nodeData"originalNode…...
爬虫学习记录
1.概念 通过编写程序,模拟浏览器上网,然后让其去互联网上抓取数据的过程 通用爬虫:抓取的是一整张页面数据聚焦爬虫:抓取的是页面中的特定局部内容增量式爬虫:监测网站中数据更新的情况,只会抓取网站中最新更新出来的数据 robots.txt协议: 君子协议,网站后面添加robotx.txt…...
Erlang语言的函数实现
Erlang语言函数实现的深度探讨 引言 Erlang是一种并发编程语言，最初由爱立信公司为电信系统开发。它以其强大的并发处理能力和容错机制而闻名，广泛应用于实时系统和分布式系统。本文将详细探讨Erlang语言中的函数实现，包括函数的定义、调用…...
LLM之RAG实战（五十一）| 使用python和Cypher解析PDF数据，并加载到Neo4j数据库
一、必备条件： python语言Neo4j数据库python库：neo4j、llmsherpa、glob、dotenv 二、代码： from llmsherpa.readers import LayoutPDFReaderfrom neo4j import GraphDatabaseimport uuidimport hashlibimport osimport globfrom datetime …...
单例模式-如何保证全局唯一性？
以下是几种实现单例模式并保证全局唯一性的方法： 1. 饿汉式单例模式 class Singleton { private:// 私有构造函数，防止外部创建对象Singleton() {}// 静态成员变量，存储单例对象static Singleton instance; public:// 公有静态成员函数&…...
05、Docker学习，常用安装：Mysql、Redis、Nginx、Nacos
Docker学习，常用安装：Mysql、Redis、Nginx、Nacos 一、Docker安装Mysql 1、docker search mysql ##查找mysql版本都有哪些 2、docker pull mysql:5.6 ##下载5.6版本的mysql镜像 3、docker run -p 13306:3306 --name mysql ##运行…...
docker 启动redis 守护进程
文章目录 前言一、整体流程二、状态图三、结语 前言 在现代软件开发中，缓存和消息队列是提高应用性能和扩展性的关键。Redis 是一种流行的内存数据结构存储系统，它支持多种类型的数据结构，如字符串、哈希、列表、集合、有序集合等。使用 Doc…...
Angular由一个bug说起之十三：Cross Origin
跨域 想要了解跨域，首要要了解源 什么是源，源等于协议加域名加端口号 只有这三个都相同，才是同源，反之则是非同源。 比如下面这四个里，只有第4个是同源 而浏览器给服务器发送请求时，他们的源一样࿰…...
为深度学习引入张量
为深度学习引入张量 什么是张量？ 神经网络中的输入、输出和转换都是使用张量表示的，因此，神经网络编程大量使用张量。 张量是神经网络使用的主要数据结构。 张量的概念是其他更具体概念的数学概括。让我们看看一些张量的具体实例。 张量…...
opencv摄像头标定程序实现
摄像头标定是计算机视觉中的一个重要步骤，用于确定摄像头的内参（如焦距、主点、畸变系数等）和外参（如旋转矩阵和平移向量）。OpenCV 提供了方便的工具来进行摄像头标定。下面分别给出 C 和 Python 的实现。 1. C 实现…...
Flutter：封装一个自用的bottom_picker选择器
效果图：单列选择器 使用bottom_picker: ^2.9.0实现，单列选择器，官方文档 pubspec.yaml # 底部选择 bottom_picker: ^2.9.0picker_utils.dart AppTheme：自定义的颜色 TextWidget.body Text() <Widget>[].toRow Row()下边代…...
)
Docker 容器自动化管理之脚本(Script for Docker Container Automation Management)
Docker 容器自动化管理之脚本 简介 Docker是一个开源的容器化平台，旨在简化应用程序的开发、部署和运行过程。它通过将应用程序及其依赖项打包到一个可移植的容器中，使得开发人员能够在不同的环境中以一致的方式构建、打包和分发应用程序。 Docke…...
client-go中watch机制的一些陷阱
Reference https://stackoverflow.com/questions/51399407/watch-in-k8s-golang-api-watches-and-get-events-but-after-sometime-doesnt-get-an 问题描述 最近在使用 client-go 的 watch 机制监听 k8s 中的 deployment 资源时，发现一个奇怪的现象 先看下代码&a…...
用户界面的UML建模11
然而，在用户界面方面，重要的是要了解《boundary》类是如何与这个异常分层结构进行关联的。 《exception》类的对象可以作为《control》类的对象。因此，《exception》类能够聚合《boundary》类。 参见图12，《exception》Database…...
计算机网络之---数据链路层的功能与作用
数据链路层概念 数据链路层（Data Link Layer）是计算机网络中的第二层，它位于物理层和网络层之间，主要负责数据在物理链路上的可靠传输。其基本功能是将网络层传来的数据分成帧，并负责在物理链路上可靠地传输这些数据帧…...
添加到 PATH 环境变量中
命令解释 # 将命令中的<CLI_PATH>替换为您aliyun文件的所在目录。 echo export PATH$PATH:<CLI_PATH> >> ~/.bash_profile echo export PATH$PATH:/data2/ljsang/aliyun/aliyun >> ~/.bash_profileexport PATH$PATH:/data2/ljsang/aliyun/aliyun&…...
【51单片机零基础-chapter6:LCD1602调试工具】
实验0-用显示屏LCD验证自己的猜想 如同c的cout,前端的console.log() #include <REGX52.H> #include <INTRINS.H> #include "LCD1602.h" int var0; void main() {LCD_Init();LCD_ShowNum(1,1,var211,5);while(1){;} }实验1-编写LCD1602液晶显示屏驱动函…...
Linux 内核中的 netif_start_queue 函数：启动网络接口发送队列的关键
在 Linux 内核的网络子系统中，netif_start_queue 函数扮演着至关重要的角色。这个函数的主要功能是启动（或启用）网络接口的发送队列，标志着网络接口已经准备好开始发送数据包。本文将深入探讨 netif_start_queue 函数的用途、工作原理以及在实际网络驱动代码中的应用。 函…...
（七）人工智能进阶之人脸识别：从刷脸支付到智能安防的奥秘，小白都可以入手的MTCNN+Arcface网络
零、开篇趣谈 还记得第一次用支付宝"刷脸"时的新奇感吗？或者被抖音的人脸特效逗乐的瞬间？这些有趣的应用背后，其实藏着一个精妙的AI世界。今天，就让我们开启一段奇妙的人脸识别技术探索之旅吧！ 一、人脸识…...
ExcelDataReader：一个.Net高性能Excel开源读取器
推荐一个用于读取Microsoft Excel文件的高性能开源库。 01 项目简介 ExcelDataReader是一个功能强大且易于使用的开源项目，提供了丰富的读取API，专门读取Excel文件的数据，特别是处理大数据量的情况。 ExcelDataReader支持Excel版本从2007年…...
人工智能-机器学习之多元线性回归（项目实践一）
目标：运用scikit-learn进行多元线性回归方程的构建，通过实际案例的训练集和测试集进行预测，最终通过预测结果和MSE来评估预测的精度。 一、首先安装scikit-learn：pip install scikit-learn C:\Users\CMCC\PycharmProjects\AiPro…...
Mysql--基础篇--约束（主键，外键，唯一，检查，枚举及复合约束等）
在MySQL中，约束（Constraints）是用于确保数据库中数据完整性和一致性的规则。通过定义约束，可以防止用户插入、更新或删除不符合特定条件的数据，从而保证数据的准确性和可靠性。MySQL支持多种类型的约束，每种…...
经典多模态模型CLIP - 直观且详尽的解释
对比语言-图像预训练（CLIP），这是一种创新的多模态建模策略，能够创建视觉和语言的联合表示。CLIP 的效果非常出色，可以用于构建高度特定且性能卓越的分类器，而无需任何训练数据。本文将深入探讨其理论基础&a…...
着丝粒鉴定CentIER v3.0安装与使用-bioinfomatics tools41
使用CentIE鉴定着丝粒 T2T基因组端粒与着丝粒的区别及其鉴定方法-随笔02_chip-seq鉴定着丝粒-CSDN博客 T2T时代的基因组组装-文献精读-9_基因组t2t组装-CSDN博客 桑树T2T基因组-文献精读16_桑树基因组-CSDN博客 辣椒属2个T2T基因组-文献精读23_辣椒基因组-CSDN博客 大花…...
Objective-C语言的多线程编程
Objective-C语言的多线程编程 在现代应用程序开发中，尤其是移动应用开发，多线程编程是一个不可或缺的部分。使用多线程可以提升应用的响应能力，使得可以同时处理多个任务，从而优化用户体验。在本文中，我们将深入探讨O…...
Golang的并发编程框架比较
# Golang的并发编程框架比较 中的并发编程 在现代软件开发中，处理高并发的能力愈发重要。Golang作为一门支持并发编程的编程语言，提供了丰富的并发编程框架和工具，使得开发者能够更轻松地处理并发任务。本文将介绍Golang中几种常用的并发编程…...
通过 oh-my-posh posh-git 优化PowerShell
转自oh-my-posh & posh-git 提升在 windows 环境的开发体验 oh-my-posh 是用于自定义 PowerShell 主题和配色的工具，posh-git 则是为 PowerShell 提供了方便的 git 状态显示和命令补全功能。 安装PowerShell 7和 winget下载器，都可以直接在 Microsof…...
【Linux系列】Vim 编辑器中的高效文本编辑技巧：删除操作
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
慧集通（DataLinkX）iPaaS集成平台-连接器
如何创建连接器？ 连接器是用于跟各系统进行连接，是集成交互的基础构成也是主要构成之一；连接器一般是根据业务系统的开放的不同方式由开发人员进行封装，封装完成后交付人员可以在所有连接那里建立对应的连接，连接需要…...
vue3使用vue3-video-play播放m3u8视频
1.安装vue3-video-play npm install vue3-video-play --save2.在组件中使用 import vue3-video-play/dist/style.css; import VideoPlay from vue3-video-play;// 视频配置项 const options reactive({src: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, //视频源mute…...
单片机-外部中断
中断是指 CPU 在处理某一事件 A 时，发生了另一事件 B，请求 CPU 迅速去处理(中断发生)；CPU 暂时停止当前的工作(中断响应)， 转去处理事件 B(中断服务)；待 CPU 将事件 B 处理完毕后，再回到原来事件 A 被中断的…...
《C++11》右值引用深度解析：性能优化的秘密武器
C11引入了一个新的概念——右值引用，这是一个相当深奥且重要的概念。为了理解右值引用，我们需要先理解左值和右值的概念，然后再理解左值引用和右值引用。本文将详细解析这些概念，并通过实例进行说明，以揭示右值引用如何…...
【HTML+CSS+JS+VUE】web前端教程-1-VScode开发者工具快捷键
VScode打开文件夹与创建文件 1、选择文件夹 2、拖拽文件夹 生成浏览器文件.html的快捷方式 ! 回车vscode常用快捷键列表 代码格式化：shift alt F 向上或向下移动一行： alt up 或者 alt down 快速复制一行代码：shift alt up 或者 sh…...
【嵌入式硬件】直流电机驱动相关
项目场景： 驱动履带车（双直流电机）前进、后退、转弯 问题描述 电机驱动MOS管烧毁 电机驱动采用IR2104STRH1R403NL的H桥方案（这是修改之后的图） 原因分析： 1.主要原因是4路PWM没有限幅，修改…...
接口测试-postman（使用postman测试接口笔记）
一、设置全局变量 1. 点击右上角设置按钮-》打开管理环境窗口-》选择”全局“-》设置变量名称，初始值和当前值设置一样的，放host放拼接的url，key放鉴权那一串字符，然后保存-》去使用全局变量，用{{变量名称}}形式 二、…...
强化学习常用库的版本对应关系
本文介绍了pytorch强化学习框架和常用python库的对应关系。 持续更新中！ 基础包 工具包版本描述python3.9.13-numpy1.24.3-protobuf3.19.6结构化数据包cython0.29.21静态编译器setuptools66.0.0-学习框架 工...