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

【前端基础】8、CSS的选择器

news 来源：原创 2025/8/13 0:45:00

一、什么是选择器？

根据一定的规则选出符合条件的HTML元素，从而为他们添加各种特定的样式。

二、选择器分类

  1. 通用选择器
  2. 元素选择器
  3. 类选择器
  4. id选择器
  5. 属性选择器
  6. 后代选择器
  7. 兄弟选择器
  8. 选择器组
  9. 伪类

三、通用选择器（*）

作用：帮我们选中所有的元素。
*就是通配符一样的，它会匹配所有元素。包括html元素。
在这里插入图片描述

一般实际操作中不使用。
因为它会把所有元素都匹配一边，哪怕你的HTML文件中都没有用到的元素。

四、元素选择器

使用元素的名称。
在这里插入图片描述

五、类选择器

使用.class名。也就是：.类名
所有使用这个class名的元素都会有同一个样式。
但是因为css的层叠特性等等，所有不一定是所有的样式会有这个样式，会存在覆盖。
在这里插入图片描述

六、id选择器

使用#id名。同一个HTML中就一个id。保持唯一性。

在这里插入图片描述
在这里插入图片描述

七、属性选择器

在这里插入图片描述

例子：
在这里插入图片描述
在这里插入图片描述

八、后代选择器

1、所有后代
在这里插入图片描述

例子：

  1. HTML结构
    在这里插入图片描述
  2. 目标：选择home下的span
    在这里插入图片描述
  3. 结果
    在这里插入图片描述
    1、只有一个后代（直接子代）。
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

小米网站中的示例：
在这里插入图片描述

九、兄弟选择器

在这里插入图片描述
例子：
在这里插入图片描述
在这里插入图片描述

十、选择器组

  1. 交集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 并集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

十一、伪类（非常粗略的描述）

  1. 什么是伪类
    选择器的一种，用于选择处于特定状态的元素。
    最常见的现象：鼠标放在某些文字上面，文字就会加上颜色。
    鼠标没放上去之前：
    在这里插入图片描述
    鼠标放上去之后：
    在这里插入图片描述

  2. 常见伪类
    最最常用： :hover ，其他的，需要就查吧。
    在这里插入图片描述
    其他博客1
    其他博客2
    其他博客3

相关文章：

【前端基础】8、CSS的选择器

一、什么是选择器？ 根据一定的规则选出符合条件的HTML元素，从而为他们添加各种特定的样式。 二、选择器分类 通用选择器元素选择器类选择器id选择器属性选择器后代选择器兄弟选择器选择器组伪类 三、通用选择器（*） 作用&…...

编程日记 2025/8/13 0:45:00

Redis支持哪些数据类型？各适用于什么场景？

Redis（C语言实现）支持以下9种核心数据类型及其适用场景： String（字符串） 场景：缓存、计数器、分布式锁示例：SET user:1001 "John" EX 60（缓存用户信息60秒）优势…...

编程日记 2025/8/13 0:43:22

两种方法求解最长公共子序列问题并输出所有解

最长公共子序列（Longest Common Subsequence, LCS）是动态规划领域的经典问题，广泛应用于生物信息学（如DNA序列比对）、文本差异比对（如Git版本控制）等领域。本文将通过​​自顶向下递归记忆化​​…...

编程日记 2025/8/13 0:43:24

Linux下的c/c++开发之操作Sqlite3数据库

libsqlite3-dev 介绍（Linux 下的 SQLite3 C/C 开发包） libsqlite3-dev 是一个开发包，在 Linux 环境下为使用 SQLite3 C API 进行开发的 C/C 程序员提供头文件（如 sqlite3.h）和静态库/动态库的链接信息（如 …...

编程日记 2025/8/8 5:00:05

设计模式-策略模式

概念 策略模式主要是定义一系列算法，把它们封装起来，并且使它们可以互相替换。这样客户端可以根据需要选择不同的策略，而不需要改变使用策略的上下文。 策略模式的核心思想： 解耦策略定义：把各种支付方式&#xff0…...

编程日记 2025/8/13 0:43:24

Lost connect to debugger on ‘iphone‘

跑项目的时候，遇到这样一个报错，无法在真机和模拟器上跑， 处理方法 在根目录下，创建.lldbinit 文件 touch .lldbinit查找该文件 ls -all 然后 打开该文件 open .lldbinit 添加如下文案 settings set plugin.process.gdb-remot…...

编程日记 2025/8/13 0:43:24

全球森林数据如何分析？基于R语言森林生态系统结构、功能与稳定性分析与可视化

森林生态系统的结构、功能与稳定性研究是生态学领域的核心议题，涉及物种多样性、空间分布、能量流动及抗干扰能力等关键生态过程。为系统解析这些复杂关系，本研究采用R语言作为核心分析工具，整合多元统计方法与可视化技术，构建了一…...

编程日记 2025/8/8 7:38:02

Modbus RTU 转 PROFINE 网关

一、功能及注意事项 (1)功能说明：此文档用来说明Modbus RTU 转 PROFINE网关和立迈胜一体化485通讯电机使用。 (2)注意事项：文档介绍的是高迈德 PN-01MB模块。 二、系统参数设置 1.参考电机的波特率和校验码进行正确设置，如图所示&#xf…...

编程日记 2025/8/8 5:00:00

Redis如何实现分布式锁

Redis如何实现分布式锁 背景复盘解答被问到的问题如果过期时间没有设置好, 业务没有处理完锁就被释放了, 怎么办呢? 背景 之前被面试问到了 复盘解答 核心就是利用 set param1 nx param2 命令. set not exist 如果不存在就自行set操作. 被问到的问题 如果过期时间没有设置…...

编程日记 2025/8/8 4:59:58

vue3的深入组件-组件 v-model

组件 v-model 基本用法​ v-model 可以在组件上使用以实现双向绑定。 从 Vue 3.4 开始&#xff0c;推荐的实现方式是使用 defineModel() 宏&#xff1a; <script setup> const model defineModel()function update() {model.value } </script><template>…...

编程日记 2025/8/8 4:59:57

【Dv3Admin】Git 子模块在 Dv3admin 插件项目统一管理实践

在 Dv3admin 框架中&#xff0c;plugins 目录下存放的都是基于 Git 的独立插件项目。为了实现多个插件的统一管理与更新&#xff0c;我们推荐使用 Git 的子模块&#xff08;submodule&#xff09;功能。通过子模块的方式&#xff0c;将多个 Git 仓库嵌套管理&#xff0c;可以简…...

编程日记 2025/8/8 4:59:55

什么是死信队列？死信队列是如何导致的？

死信交换机&#xff08;Dead Letter Exchange&#xff0c;DLX&#xff09; 定义&#xff1a;死信交换机是一种特殊的交换机&#xff0c;专门用于**接收从其他队列中因特定原因变成死信的消息**。它的本质还是交换机&#xff0c;遵循RabbitMQ中交换机的基本工作原理&#xff0c…...

编程日记 2025/8/8 4:59:53

计算机网络：深入分析三层交换机硬件转发表生成过程

三层交换机的MAC地址转发表生成过程结合了二层交换和三层路由的特性，具体可分为以下步骤： 一、二层MAC地址表学习（基础转发层） 初始状态 交换机启动时，MAC地址表为空，处于学习阶段。 数据帧接收与源MAC学习 当主机A发送数据帧到主机B时，交换机会检查数据帧的源MAC地址。…...

编程日记 2025/8/8 4:59:52

java使用MinIO，虚拟机时间异常

使用docker进行环境部署和启动 docker pull minio/miniodocker run -d -p 9000:9000 -p 9001:9001 \-e "MINIO_ROOT_USERminio" \-e "MINIO_ROOT_PASSWORDminio123" \-v /opt/minio/data:/data \-v /opt/minio/config:/root/.minio \minio/minio server --…...

编程日记 2025/8/8 4:59:50

使用Jmeter进行核心API压力测试

最近公司有发布会&#xff0c;需要对全链路比较核心的API的进行压测&#xff0c;今天正好分享下压测软件Jmeter的使用。 一、什么是Jmeter? JMeter 是 Apache 旗下的基于 Java 的开源性能测试工具。最初被设计用于 Web 应用测试&#xff0c;现已扩展到可测试多种不同的应用程…...

编程日记 2025/8/8 4:59:49

嵌入式学习笔记 - LCD

一 显示器接口种类&#xff1a; 下图中间左边一个为不带MCU的RGB屏&#xff0c;中间右边一个为带MCU的MCU屏 带控制器的LCD屏幕跟STM32单片机的交互方式&#xff0c;可以为串口&#xff0c;也可以为SPI&#xff0c;或者8080&#xff0c;通过命令的方式对液晶控制器芯片进行操作…...

编程日记 2025/8/8 4:59:47

聊聊Spring AI Alibaba的SentenceSplitter

序 本文主要研究一下Spring AI Alibaba的SentenceSplitter SentenceSplitter spring-ai-alibaba-core/src/main/java/com/alibaba/cloud/ai/transformer/splitter/SentenceSplitter.java public class SentenceSplitter extends TextSplitter {private final EncodingRegis…...

编程日记 2025/8/8 3:36:38

Python 异常处理与文件 IO 操作：构建健壮的数据处理体系（3/10）

摘要&#xff1a;在 Python 开发中&#xff0c;异常处理和文件 IO 操作是构建稳定程序的基石。本文将深入探讨异常捕获机制、上下文管理器原理&#xff0c;并结合 JSON/CSV 数据持久化与实战项目&#xff0c;帮助你掌握应对复杂场景的核心技术。 本文深入探讨了 Python 编程中的…...

编程日记 2025/8/8 7:38:00

Python中，正则表达式，

目录 1.基本匹配2.量词3.边界匹配4.选择和逻辑5.示例代码 在Python中&#xff0c;正则表达式&#xff08;Regular Expressions&#xff0c;简称regex&#xff09;是一种强大的文本处理工具&#xff0c;用于匹配、查找和替换字符串中的模式。Python通过 re模块提供正则表达式支…...

编程日记 2025/8/8 7:37:58

CSS：元素显示模式与背景

元素显示模式 元素显示模式是指元素在浏览器页面中显示的模式&#xff0c;比如<div></div>是独占一行的块级元素&#xff0c;<span></span>是行内元素 元素显示模式分为三大类&#xff1a; 块级元素行内元素行内块元素 块级元素 block 常见的块级…...

编程日记 2025/8/8 7:37:56

Java游戏服务器开发流水账(2)开发中Maven的管理

Maven 是一款流行的 Java 项目管理工具&#xff0c;它基于项目对象模型&#xff08;Project Object Model&#xff0c;POM&#xff09;的概念来管理项目的构建、依赖和文档等。游戏服务器开发中也会使用. 项目构建 生命周期管理&#xff1a;Maven 定义了一套清晰的项目构建生…...

编程日记 2025/8/8 7:37:54

学习设计模式《八》——原型模式

一、基础概念 原型模式的本质是【克隆生成对象】&#xff1b; 原型模式的定义&#xff1a;用原型实例指定创建对象的种类&#xff0c;并通过拷贝这些原型创建新的对象 。 原型模式的功能&#xff1a; 1、通过克隆来创建新的对象实例&#xff1b; 2、为克隆出来的新对象实例复制…...

编程日记 2025/8/8 7:37:52

【MySQL】存储引擎 - MEMORY详解

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;博客仓库&#xff1a;https://gitee.com/JohnKingW/linux_test/tree/master/lesson &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &…...

编程日记 2025/8/8 7:37:50

正则表达式实用指南：原理、场景、优化与引擎对比

正则表达式实用指南&#xff1a;原理、场景、优化与引擎对比 正则表达式&#xff08;Regular Expression&#xff0c;简称 regex 或 regexp&#xff09;是程序员处理文本数据时不可或缺的“瑞士军刀”。无论是表单校验、日志分析、数据清洗&#xff0c;还是敏感信息脱敏&#…...

编程日记 2025/8/7 7:44:08

Python3正则表达式：字符串魔法师的指南[特殊字符]‍♂️

Python3正则表达式 什么是正则表达式&#xff1f;在Python中使用正则表达式一、正则表达式基础语法&#xff1a;你的魔法咒语基本匹配符字符类&#xff1a;性格各异的字符们预定义字符类&#xff1a;常见角色的快捷方式重复限定符&#xff1a;贪婪的收集者贪婪vs非贪婪&#xf…...

编程日记 2025/8/8 7:37:45

k8s术语之CronJob

CronJob管理基于时间的Job&#xff0c;即&#xff1a; 在给定时间点只运行一次 周期性地在给定时间点运行 一个CronJob对象类似于crontab文件中的一行。它根据指定的预定计划周期地运行一个Job,格式可以参考Cron 前提条件 当前使用地Kubernetes集群&#xff0c;版本>1.8.对…...

编程日记 2025/8/8 7:37:43

常见的提示词攻击方法 和防御手段——提示词注入（Prompt Injection）攻击解析

提示词注入&#xff08;Prompt Injection&#xff09;攻击解析 提示词注入是一种针对大型语言模型&#xff08;LLM&#xff09;的新型攻击手段&#xff0c;攻击者通过精心设计的输入文本&#xff08;提示词&#xff09;操控AI模型的输出&#xff0c;使其执行非预期行为或泄露敏…...

编程日记 2025/8/8 7:37:41

软件逆向工程核心技术：脱壳原理与实战分析

目录 一、脱壳技术概述&#xff1a;从保护到还原的逆向之旅 1.1 脱壳技术的本质与核心价值 1.2 壳的分类与核心技术解析 1.3 学习路径&#xff1a;从压缩壳到加密壳的渐进式突破 二、脱壳三步法&#xff1a;系统化逆向工程框架 2.1 核心流程总览 2.2 实战案例&#xff1…...

编程日记 2025/8/8 7:37:39

C27-简单选择排序法

一 基本思想 每轮从待排序序列中选出最小或最大的元素,与待排序区间起始位置交换,逐步缩小待排序区间 二 算法实现 遍历数组:设数组长度为n,外层循环i从0到n-2(共n-1轮) 找最小值下标:内层循环j从i1到n-1,遍历待排序区间(i到n-1),记录找最小值下标min 交换元素:将arr[i]与a…...

编程日记 2025/8/8 7:37:37

【Redis】持久化与事务

文章目录 1. 持久化1.1 RDB(定期)1.1.1 触发方式1.1.2 触发流程 1.2. AOF(实时)1.2.1 设置AOF1.2.2 刷新策略1.2.3 重写机制 2. 事务2.1 redis事务概念2.2 事务操作 Mysql有几个特性&#xff1a; 原子性一致性隔离性&#xff0c;redis是串行的&#xff0c;自带隔离性持久性&…...

编程日记 2025/8/8 7:37:35

Web 自动化之 HTML JavaScript 详解

文章目录 一、HTML 常用标签二、javascript 脚本1、什么是 javascript(js)2、 js变量和函数3、js 弹窗处理4、js 流程控制语句和 switch 结构语句应用 一、HTML 常用标签 HTML&#xff1a;超文本标记语言 超文本&#xff1a;不仅只包含文字&#xff0c;还有超链接、视频…这些…...

编程日记 2025/8/8 7:37:32

【JavaScript】二十九、垃圾回收 + 闭包 + 变量提升

文章目录 1、作用域1.1 局部作用域1.2 全局作用域1.3 作用域链 2、JC垃圾回收机制♻️3、GC算法3.1 引用计数法3.2 标记清除法 4、闭包4.1 定义4.2 闭包的应用&#xff1a;实现数据的私有 5、变量提升 1、作用域 即一个范围&#xff0c;离开了这个范围&#xff0c;这个变量就不…...

编程日记 2025/8/8 7:37:30

Python在自动驾驶实时数据处理中的应用：让AI驾驶更智能、更高效

Python在自动驾驶实时数据处理中的应用：让AI驾驶更智能、更高效 近年来，自动驾驶技术的飞速发展离不开人工智能和数据处理的支撑，而Python作为AI与数据分析的核心编程语言，在自动驾驶实时数据处理方面扮演着不可或缺的角色。从传感器数据解析，到路径规划与决策优化，再到…...

编程日记 2025/8/8 7:37:28

功能安全的关键——MCU锁步核技术全解析（含真实应用方案）

随着智能汽车的发展&#xff0c;整车对功能安全的要求越来越高。特别是像电动助力转向&#xff08;EPS&#xff09;、制动控制系统、气囊控制器这类对“出错零容忍”的系统&#xff0c;已经广泛采用一种重要的安全架构——锁步核&#xff08;Lockstep Core&#xff09;。 今天我…...

编程日记 2025/8/8 7:37:26

Java实现桶排序算法

1. 桶排序原理图解 桶排序是一种基于分桶思想的非比较排序算法&#xff0c;适用于数据分布较为均匀的场景。其核心思想是将数据分散到有限数量的“桶”中&#xff0c;每个桶再分别进行排序&#xff08;通常使用插入排序或其他简单的排序算法&#xff09;。以下是桶排序的步骤&a…...

编程日记 2025/8/8 7:37:24

剖析 FFmpeg：从基本功能到过滤器，实现音视频处理的灵活性

目录 1.解复用2 解码2.1 音频解码2.2 视频解码 3 修饰3.1 avio3.2 重采样 4 过滤器4.1 过滤器基本知识4.2 简单过滤器4.3 复杂滤镜图 1.解复用 解复用就是把容器中的媒体流分离出来&#xff0c;方便我们对媒体流处理。 step1&#xff1a;对媒体文件上下文初始化 AVFormatCont…...

编程日记 2025/8/8 7:37:21

maven如何搭建自己的私服(LINUX版)？

环境准备 安装 JDK &#xff1a;确保系统已安装 JDK 8 或更高版本。可以通过以下命令安装 JDK&#xff1a; 安装 OpenJDK &#xff1a;sudo apt update && sudo apt install openjdk-11-jdk 安装 Oracle JDK &#xff1a;需要添加第三方仓库&#xff0c;例如 WebUpd8 …...

编程日记 2025/8/8 7:37:19

机器视觉的手机FPC油墨丝印应用

在现代智能手机制造过程中&#xff0c;精密的组件装配和质量控制是确保产品性能和用户体验的关键。其中&#xff0c;柔性印刷电路板&#xff08;FPC&#xff09;的油墨丝印工艺尤为关键&#xff0c;它不仅影响到电路板的美观&#xff0c;更直接关系到电路的导电性能和可靠性。而…...

编程日记 2025/8/8 7:37:17

AI原生手机：三大技术阵营的终极对决与未来展望

引言&#xff1a;AI手机时代的真正到来 2024年&#xff0c;智能手机行业迎来了一个历史性转折点——AI原生手机从概念走向主流。根据IDC最新报告&#xff0c;中国AI手机出货量同比激增591%&#xff0c;渗透率从2023年的3%飙升至22%。这一数据背后&#xff0c;是手机厂商在硬件…...

编程日记 2025/8/8 7:37:15

CFCA受邀参加盛京银行手机银行7.0发布会

4月30日&#xff0c;盛京银行举办手机银行7.0发布会。 盛京银行手机银行7.0围绕“慧享生活&#xff0c;财富随行”主题&#xff0c;聚焦便捷体验、财富管理、惠民生活&#xff0c;构建12大类服务&#xff0c;升级142项功能&#xff0c;全新设置信用卡频道&#xff0c;推出“云…...

编程日记 2025/8/8 7:37:13

IT/OT 融合架构下的工业控制系统安全攻防实战研究

1. 引言 随着工业 4.0 和智能制造的浪潮席卷全球&#xff0c;信息技术 (IT) 与运营技术 (OT) 的融合已成为不可逆转的趋势。这种融合旨在通过实时数据交换和分析&#xff0c;打破传统的信息孤岛&#xff0c;显著提升生产效率、优化决策、降低运营成本并增强市场竞争力。IT 系统…...

编程日记 2025/8/8 7:37:09

AI优化高频PCB信号完整性：猎板PCB的技术突破与应用实践

随着5G通信、AI服务器及新能源汽车的快速发展&#xff0c;高频PCB的信号完整性已成为决定电子产品性能的关键。本文以猎板PCB的技术实践为例&#xff0c;解析如何通过AI算法与精密制造工艺的结合&#xff0c;实现高频信号传输的极致优化&#xff0c;为行业提供高可靠性的解决方…...

编程日记 2025/8/8 9:42:49

【Bluedroid】蓝牙 SDP（服务发现协议）模块代码解析与流程梳理

本文深入剖析Bluedroid蓝牙协议栈中 SDP&#xff08;服务发现协议&#xff09;服务记录的全生命周期管理流程&#xff0c;涵盖初始化、记录创建、服务搜索、记录删除等核心环节。通过解析代码逻辑与数据结构&#xff0c;揭示各模块间的协作机制&#xff0c;包括线程安全设计、回…...

编程日记 2025/8/8 7:37:06

obj = null； 赋值null之前没有其他引用指向obj对象，那么，当obj=null时，会被垃圾回收机制立即回收吗？

不会立即回收。 具体原因是&#xff1a; 赋值 obj null; 后&#xff0c;对象变成“不可达”&#xff0c;符合垃圾回收条件&#xff0c;但垃圾回收器并不会立刻回收它。垃圾回收是CLR自动控制的非确定性过程&#xff0c;什么时候执行回收取决于系统内存压力、GC策略、分代情况…...

编程日记 2025/8/10 10:55:49

Android 数据持久化之 文件存储

在 Android 开发中&#xff0c;存储文件是一个常见的需求。 本文中介绍 openFileOutput 和 File 两种不同的方式来操作文件。 一、File 方式 根据文件的存储位置和访问权限&#xff0c;可以将文件存储分为内部存储&#xff08;Internal Storage&#xff09;和外部存储&#x…...

编程日记 2025/8/8 7:37:02

差分OPA verilogaA 模型

做电路设计&#xff0c;需要提前用理想模型如VerilogA模型做验证。这里分享一个由ahdlib库里单端opamp改造而来的差分opamp。参考何乐年的《模拟集成电路设计与仿真》10.4节423页&#xff1b; 描述的小信号模型如上。 VerilogA 用到了SRI/C&#xff0c;GBWgm/C,gaingm*r1等概念…...

编程日记 2025/8/8 7:37:00

oracle goldengate非并行进程转换为并行进程

oracle goldengate非并行进程转换为并行进程 在上一期的文章中写道了直接创建并行进程的方式对大事务进行分解&#xff0c;这对于新建立同步进程的时候提前规划是很有帮助的&#xff0c;但是如果对已经进行了同步的进程重新建立需要耗时比较长&#xff0c;Oracle提供了非并行进…...

编程日记 2025/8/8 7:36:58

58.[前端开发-前端工程化]Day05-webpack-Git安装-配置-Git命令

Git版本控制工具详解 1 邂逅版本控制工具 认识版本控制&#xff08;版本控制&#xff09; 版本控制的功能 版本控制的历史 2 集中式和分布式区别 集中式版本控制 分布式版本控制 3 Git的环境安装搭建 Git的安装 Bash – CMD – GUI 区别 Git的配置分类 Git的配置选项 Git的…...

编程日记 2025/8/8 7:36:56

CF每日5题

每日刷题两小时颐养天年 1855A 800 思维 将不高兴的同学计数cnt 不高兴的同学之间两两交换&#xff0c;一定不会在 p i i p_ii pi​i的位置上&#xff0c;贡献是cnt/2 如果cnt%2>0&#xff0c;那就多交换一次 void solve() {int n;cin>>n;int cnt0;forr(i,1,n){in…...

编程日记 2025/8/8 7:36:53

Redis实现分布式获取全局唯一自增ID的案例。

【1】简易自增版本(从 1 开始 1,2,3&#xff0c;...) 项目结构 下面是一个基于 RedisTemplate 实现的分布式全局唯一自增 ID 生成器的案例。适用于 Java Spring Boot 环境&#xff0c;利用 Redis 的原子操作 INCR 指令。 ✅ 原理说明 Redis 提供的 INCR 命令是原子性的&…...

编程日记 2025/8/8 7:36:51