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

CSS3 选择器完全指南：从基础到高级的元素定位技术

news 来源：原创 2025/7/14 14:33:19

CSS3选择器完全指南：从基础到高级的元素定位技术

一、基本选择器：精准定位的基石

（一）元素选择器

通过元素标签名直接匹配页面元素，语法简洁直观：

p { color: #333; } /* 选择所有<p>元素 */
div { margin: 10px; } /* 选择所有<div>元素 */

特性：

全局匹配性：会选中页面中所有符合标签名的元素
继承性：应用的样式会被内部子元素继承（如文本颜色、字体等）

（二）ID选择器

通过元素的id属性进行唯一匹配，使用#符号标识：

#header { height: 80px; } /* 选择id为header的元素 */
#main-content { width: 960px; } /* 选择id为main-content的元素 */

特性：

唯一性：每个ID在页面中应唯一（HTML规范要求）
高优先级：ID选择器的优先级高于类选择器和元素选择器
性能考量：过度使用ID选择器会降低CSS的可维护性

（三）类选择器

通过元素的class属性进行批量匹配，使用.符号标识：

.container { max-width: 1200px; } /* 选择所有class包含container的元素 */
.highlight { background-color: #fffacd; } /* 选择所有class包含highlight的元素 */

特性：

多类支持：一个元素可同时应用多个类（如<div class="container highlight">）
灵活性：可在多个元素间复用，是CSS模块化的基础
权重适中：优先级低于ID选择器，高于元素选择器

（四）属性选择器

通过元素的属性及属性值进行匹配，提供更细致的选择能力：

/* 存在性选择器 */
[disabled] { cursor: not-allowed; } /* 选择所有带disabled属性的元素 *//* 值精确匹配 */
[type="text"] { border: 1px solid #ccc; } /* 选择所有type="text"的元素 *//* 子串匹配 */
[href^="https"] { color: #2196F3; } /* 以https开头的href属性 */
[href$=".pdf"] { background: url(pdf-icon.png); } /* 以.pdf结尾的href属性 */
[class*="btn-"] { padding: 8px 16px; } /* class中包含btn-的元素 */

特性：

通配符支持：
- ^= 匹配开始字符
- $= 匹配结束字符
- *= 匹配任意位置包含的字符
命名空间支持：可匹配特定命名空间的属性（如[xlink:href]）

（五）通用选择器

使用*符号匹配页面中所有元素，通常用于重置默认样式：

* {margin: 0;padding: 0;box-sizing: border-box;
}

特性：

全局性：会匹配所有元素，包括HTML、BODY等根元素
性能影响：过度使用会导致CSS解析性能下降
组合应用：常与其他选择器组合使用（如.container *选择容器内所有子元素）

二、复合选择器：构建复杂匹配规则

（一）后代选择器

使用空格分隔两个选择器，表示匹配前一个元素的所有后代元素：

article p { line-height: 1.6; } /* 选择article内的所有<p>元素（包括嵌套的） */
nav ul li { display: inline-block; } /* 选择nav内所有<ul>下的<li>元素 */

特性：

多层级匹配：可跨任意层级深度匹配
顺序依赖性：选择器顺序决定匹配方向（从左到右）

（二）子元素选择器

使用>符号分隔，表示只匹配直接子元素：

section > h2 { color: #444; } /* 只选择section的直接子元素<h2> */
ul > li:first-child { font-weight: bold; } /* 选择<ul>的第一个直接子元素<li> */

特性：

单层限制：只匹配下一级子元素，不包括更深层级
性能优化：相比后代选择器，子元素选择器解析更快

（三）相邻兄弟选择器

使用+符号分隔，表示匹配紧跟在前面元素后的同级元素：

h3 + p { margin-top: 0.5em; } /* 选择紧跟在<h3>后的<p>元素 */
input:focus + label { color: #ff5722; } /* 输入框聚焦时，相邻的<label>变色 */

特性：

同级限制：只匹配同一父元素下的相邻元素
紧邻性：必须是紧挨着的下一个元素，中间不能有其他元素间隔

（四）通用兄弟选择器

使用~符号分隔，表示匹配前面元素后的所有同级元素：

img ~ p { color: #666; } /* 选择<img>后的所有同级<p>元素 */
input:checked ~ .content { display: block; } /* 复选框选中时，显示所有后续的.content元素 */

特性：

同级限制：与相邻兄弟选择器相同
非紧邻性：可匹配后续任意位置的同级元素

（五）组合选择器

通过逗号分隔多个选择器，对多个元素应用相同样式：

h1, h2, h3 { font-family: 'Roboto', sans-serif; } /* 同时选择h1、h2、h3 */
button, .btn-link { cursor: pointer; } /* 同时选择<button>和class为btn-link的元素 */

特性：

独立性：每个选择器单独解析，互不影响
提高效率：避免重复编写相同样式

三、伪类选择器：基于状态的动态匹配

（一）链接伪类

专门用于匹配链接元素的不同状态：

a:link { color: #0366d6; } /* 未访问的链接 */
a:visited { color: #6f42c1; } /* 已访问的链接 */
a:hover { text-decoration: underline; } /* 鼠标悬停的链接 */
a:active { color: #ff4500; } /* 正在点击的链接 */

特性：

应用范围：主要用于<a>元素
LVHA顺序：建议按照:link → :visited → :hover → :active的顺序编写，避免样式覆盖

（二）结构伪类

基于元素在文档树中的位置进行匹配：

/* 基于索引的选择 */
li:first-child { border-top: none; } /* 第一个子元素 */
li:last-child { border-bottom: none; } /* 最后一个子元素 */
li:nth-child(3) { background: #f5f5f5; } /* 第3个子元素 */
li:nth-child(even) { color: #666; } /* 偶数位置的子元素 */
li:nth-child(odd) { color: #333; } /* 奇数位置的子元素 */
li:nth-child(3n+1) { font-weight: bold; } /* 从第1个开始，每3个选择1个 *//* 基于类型的选择 */
p:first-of-type { font-size: 1.2em; } /* 第一个<p>元素 */
p:last-of-type { margin-bottom: 0; } /* 最后一个<p>元素 */
p:nth-of-type(2) { color: #ff5722; } /* 第二个<p>元素 */

特性：

灵活表达式：nth-child()支持多种表达式（如2n、n+5、-n+3等）
零基索引：从1开始计数，而非0

（三）用户交互伪类

基于用户当前的交互状态进行匹配：

input:focus { outline: 2px solid #2196F3; } /* 获得焦点的输入框 */
button:hover { transform: translateY(-1px); } /* 鼠标悬停的按钮 */
input:disabled { background: #f5f5f5; } /* 禁用状态的输入框 */
input:checked + label { font-weight: bold; } /* 选中状态的复选框/单选框 */
:target { background-color: #ffeb3b; } /* 当前URL锚点指向的元素 */

特性：

动态性：样式会随用户交互状态实时变化
可访问性：合理使用能增强表单元素的可用性

（四）逻辑伪类

提供逻辑运算能力，组合多个选择器条件：

/* :not()否定伪类 */
input:not([type="submit"]) { border: 1px solid #ccc; } /* 非submit类型的输入框 */
article p:not(.intro) { margin-bottom: 1em; } /* 不包含intro类的<p>元素 *//* :is()和:where()匹配任意选择器 */
:is(header, footer) nav { background: #f8f9fa; } /* 头部或页脚中的<nav>元素 */
:where(.container, .sidebar) p { line-height: 1.6; } /* 容器或侧边栏中的<p>元素 *//* :has()关系伪类 */
article:has(h2) { border-left: 3px solid #2196F3; } /* 包含<h2>的<article>元素 */

特性：

逻辑组合：可嵌套使用多个逻辑伪类
浏览器支持：:is()和:where()已广泛支持，:has()需注意兼容性

四、伪元素选择器：操作内容片段

（一）::before和::after

在元素内容前或后插入生成的内容：

/* 添加装饰性内容 */
blockquote::before {content: "“";font-size: 2em;color: #999;
}
blockquote::after {content: "”";font-size: 2em;color: #999;
}/* 清除浮动 */
.clearfix::after {content: "";display: block;clear: both;
}

特性：

虚拟元素：生成的内容不属于DOM，仅用于视觉呈现
必须配合content属性使用（值可以为空字符串）
默认是行内元素，可通过display改变

（二）::first-letter和::first-line

分别匹配元素的第一个字母或第一行：

/* 首字母大写效果 */
p::first-letter {font-size: 2em;font-weight: bold;float: left;margin-right: 0.2em;
}/* 首行样式 */
p::first-line {font-weight: bold;color: #333;
}

特性：

应用限制：::first-letter只能用于块级元素，::first-line仅适用于文本流
样式限制：::first-letter可应用的样式更多（如浮动、字体大小等）

（三）::selection

匹配用户选中的文本区域：

::selection {background: #2196F3;color: white;
}/* 针对特定元素的选中效果 */
code::selection {background: #ff5722;
}

特性：

视觉反馈：仅影响文本的视觉呈现，不改变实际选中范围
样式限制：仅支持color、background、text-shadow等少数样式属性

（四）::placeholder

匹配表单元素的占位文本：

input::placeholder {color: #999;font-style: italic;
}textarea::placeholder {opacity: 0.7;
}

特性：

兼容性：需配合浏览器前缀（如::-webkit-input-placeholder、::-moz-placeholder）
样式限制：仅支持部分文本相关样式

五、选择器优先级与权重计算

（一）优先级规则

CSS选择器的优先级由高到低依次为：

内联样式（如<div style="color: red">）
ID选择器
类选择器、属性选择器、伪类选择器
元素选择器、伪元素选择器
通用选择器（*）

（二）权重计算

每个选择器类型对应不同的权重值：

内联样式：1000
ID选择器：100
类/属性/伪类：10
元素/伪元素：1
通用选择器：0

示例：

/* 权重: 0,1,0,0（1个类选择器） */
.container { ... }/* 权重: 0,1,1,0（1个类选择器 + 1个伪类选择器） */
.container:hover { ... }/* 权重: 1,0,1,1（1个内联样式 + 1个ID选择器 + 1个元素选择器） */
<div id="main" style="color: red">...</div>

（三）特殊情况处理

!important声明
- 任何样式声明后添加!important会覆盖所有优先级规则
- 建议谨慎使用，避免破坏样式表的层级结构

继承样式

继承的样式没有优先级，总是低于直接应用的样式

示例：

body { color: #333; } /* 继承样式 */
p { color: #666; } /* 直接应用的样式，优先级更高 */

六、实际应用中的最佳实践

（一）选择器设计原则

保持简洁
- 避免过深的选择器层级（建议不超过3层）
- 示例：避免body header nav ul li a {...}这样的深层选择器
语义化优先
- 使用类名反映元素的语义（如.btn-primary而非.blue-button）
- 结合BEM命名法提高可维护性：.block__element--modifier
性能优化
- 避免使用通用选择器与后代选择器的组合（如* .container）
- 优先使用ID和类选择器，减少浏览器匹配元素的时间

（二）常见场景应用

表单样式

/* 未聚焦的输入框 */
input:not(:focus):invalid {border-color: #ff5722;
}/* 聚焦的输入框 */
input:focus {box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.25);
}/* 选中的单选按钮 */
input[type="radio"]:checked + label::before {background-color: #2196F3;
}

响应式导航

/* 桌面端导航 */
@media (min-width: 768px) {nav ul {display: flex;}
}/* 移动端导航 */
@media (max-width: 767px) {nav ul:not(:focus-within):not(:hover) {display: none;}
}

列表样式

/* 斑马条纹 */
table tr:nth-child(even) {background-color: #f2f2f2;
}/* 首行标题样式 */
table th:first-of-type {border-radius: 4px 0 0 0;
}

七、浏览器兼容性与未来趋势

（一）兼容性注意事项

旧版浏览器支持
- IE8及以下不支持属性选择器、伪类选择器（如:nth-child）
- 使用前缀处理部分伪元素（如::-webkit-selection）
现代选择器支持
- :is()和:where()在Chrome 88+、Firefox 78+支持良好
- :has()需谨慎使用，兼容性较差

（二）未来发展方向

逻辑组合增强
- 更复杂的逻辑伪类（如:and()、:or()、:not()的组合使用）
动态状态扩展
- 支持更多基于元素状态的伪类（如:current、:past）
CSS模块与选择器
- 结合CSS Modules实现局部作用域选择器，减少全局命名冲突

八、总结：选择器是CSS的核心竞争力

CSS选择器作为样式与DOM元素之间的桥梁，其设计直接影响到代码的可维护性、性能和扩展性。从基础的元素选择器到复杂的逻辑伪类，从静态匹配到动态状态响应，选择器系统不断演进，为前端开发者提供了越来越强大的工具。

在实际开发中，需遵循以下原则：

精准定位：使用合适的选择器类型，避免过度选择
层级控制：保持选择器简洁，减少嵌套层级
语义化设计：类名和ID应反映元素的功能而非样式
动态响应：充分利用伪类和伪元素实现交互反馈
性能优化：合理使用选择器，避免影响渲染效率

掌握CSS选择器的核心技术，是成为优秀前端开发者的必经之路。随着CSS标准的不断发展，选择器系统也将持续完善，为构建更复杂、更精美的网页界面提供支持。

CSS3 选择器完全指南：从基础到高级的元素定位技术

CSS3选择器完全指南：从基础到高级的元素定位技术一、基本选择器：精准定位的基石 （一）元素选择器通过元素标签名直接匹配页面元素，语法简洁直观： p { color: #333; } /* 选择所有<p>元素 */ div…...

编程日记 2025/7/14 14:33:19

从SAM看交互式分割与可提示分割的区别与联系：Interactive Segmentation Promptable Segmentation

SAM的火爆也带来了一项新的任务：Promptable Segmentation，并且作者在文中对比了交互式分割Interactive Segmentation，并且在训练过程中也参考了交互式分割的训练方法，那么可提示分割与交互式分割有什么区别？ 个人观点…...

编程日记 2025/6/29 3:58:37

k8s初始化时候，报错无法通过 CRI（容器运行时接口）与 containerd 通信

报错主要信息处 [reset] Unmounting mounted directories in “/var/lib/kubelet” W0513 11:34:19.818023 27124 cleanupnode.go:134] [reset] Failed to evaluate the “/var/lib/kubelet” directory. Skipping its unmount and cleanup: lstat /var/lib/kubelet: no such f…...

编程日记 2025/7/14 14:51:17

k8s之k8s集群部署

一、kubernetes基础环境搭建 1.安装虚拟机 2. 基础环境配置 2.1 关闭防火墙更改主机名 #系统更新 sudo dnf update -y # 关闭防火墙 sudo systemctl stop firewalld sudo systemctl disable firewalld # 临时关闭 SELinux sudo setenforce 0 # 永久关闭 SELinux sudo sed -i…...

编程日记 2025/6/29 2:21:54

百度智能云千帆携手联想，共创MCP生态宇宙

5月7日，2025联想创新科技大会（Tech World）在上海世博中心举行，本届大会以“让AI成为创新生产力”为主题。会上，联想集团董事长兼CEO杨元庆展示了包括覆盖全场景的超级智能体矩阵，包括个人超级智能体、企业超…...

编程日记 2025/7/6 12:47:00

黑白浮生项目测试报告

文章目录一、项目背景二、项目功能三、测试计划1. 功能测试1.1 注册页面1.1.1 正常注册1.1.2 异常注册 1.2 登录页面1.2.1 正常登录1.2.2 异常登录 1.3 游戏大厅页面1.3.1 开始匹配1.3.2 取消匹配 1.4 游戏房间页面1.4.1 落子1.4.2 游戏结束 2. 自动化测试2.1 创建浏览器驱动类…...

编程日记 2025/7/14 23:22:15

《操作系统真象还原》第十四章（2）——文件描述符、文件操作基础函数

文章目录前言文件描述符简介文件描述符原理文件描述符实现修改thread.h修改thread.c 文件操作相关的基础函数inode操作相关函数文件相关函数编写file.h编写file.c 目录相关函数完善fs/dir.h编写fs/dir.c 路径解析相关函数实现文件检索功能修改fs.h继续完善fs.c makefile 结语 …...

编程日记 2025/7/14 23:40:44

k8s v1.26 实战csi-nfs 部署

一前言使用自开发的一键k8s基础环境部署后，存储需要解决，就是测试环境故选择nfs比较简单，翻阅很多网上资料感觉都不是很全面，结合网上资料折腾了一天，总算是完成了csi-nfs部署。其实之前也部署过，经过一…...

编程日记 2025/6/29 3:17:32

测试集群的功能-执行wordcount程序

具体的操作步骤如下： 确保hadoop是正确运行的。hdfs和yarn都正常启动了。在集群根目录下创建wcinput目录，并在它的下面上传两个文本文件word1.txt, word2.txt，其中保存了要测试的单词信息。在任意一台设备中，进入到hadoop的主目录…...

编程日记 2025/6/29 1:42:38

聊一聊Electron中Chromium多进程架构

Chromium 多进程架构概述 Chromium 的多进程架构是其核心设计之一，旨在提高浏览器的稳定性、安全性和性能。Chromium 将不同的功能模块分配到独立的进程中，每个进程相互隔离，避免了单进程架构中一个模块的崩溃导致整个浏览器崩溃的问题。在…...

编程日记 2025/6/29 3:07:55

虹科技术 | 简化汽车零部件测试：LIN/CAN总线设备的按键触发功能实现

汽车零部件测试领域对操作的便捷性要求越来越高，虹科Baby-LIN-RC系列产品为这一需求提供了完美的解决方案。从基础的按键设置到高级的Shift键应用，本文将一步步引导您了解虹科Baby-LIN-RC系列产品的智能控制之道。虹科Baby-LIN-3-RC 想象一下&#xff0…...

编程日记 2025/6/29 4:56:18

前端开发避坑指南：React 代理配置常见问题与解决方案

前端开发避坑指南：React 代理配置常见问题与解决方案一、为什么需要配置代理？二、使用 create-react-app 默认配置代理三、使用 http-proxy-middleware 配置复杂代理四、高级代理配置五、生产环境中的代理配置一、为什么需要配置代理？ React 应用在开发过程中经常需要与后端…...

编程日记 2025/6/29 3:30:14

43、Server.UrlEncode、HttpUtility.UrlDecode的区别？

Server.UrlEncode 和 HttpUtility.UrlDecode 是 .NET 中用于处理 URL 编码/解码的两个不同方法，主要区别在于所属命名空间、使用场景和具体行为。以下是详细对比： 1. 所属类库与命名空间 Server.UrlEncode 属于 System.Web.HttpServerUtility 类。通常…...

编程日记 2025/6/29 1:55:57

Azure 应用的托管身份与服务主体

Microsoft Entra ID -- 前称 Azure Active Directory -- 提供强大的身份验证和授权功能。托管身份和服务主体通过限制凭据暴露的风险来帮助确保对 Azure 资源的访问安全。托管身份为Azure原生应用程序自动管理身份，而服务主体则非常适合需要访问Azure资源的外部应…...

编程日记 2025/7/4 17:03:59

音频特征工具Librosa包的使用

深入探索Mamba模型架构与应用 - 商品搜索 - 京东 DeepSeek大模型高性能核心技术与多模态融合开发 - 商品搜索 - 京东要使用深度学习与语音特征进行抽取，首先需要准备能够对语音特征进行解析的工具。 Librosa是一个用于音频、音乐分析与处理的Python工具包&#x…...

编程日记 2025/7/10 17:18:26

Mapreduce初使用

（一）MapReduce的定义 MapReduce是一个分布式运算程序的编程框架，是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序，并发运行在一个…...

编程日记 2025/6/29 3:14:48

Samtec助力电视广播行业

【摘要前言】现代广播电视技术最有趣的方面之一就是界限的模糊。过去，音频和视频是通过射频电缆传输的模拟技术采集的，而现在，数字世界已经取代了模拟技术。物理胶片和磁带已让位于数字存储设备和流媒体。在这个过程中，连接器…...

编程日记 2025/6/29 4:41:08

根据输入的数据渲染柱形图

背景：根据不同季度的销售额，生成对应的柱形图，直观的看出差异效果： 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatibl…...

编程日记 2025/6/29 1:43:20

Three.js模型材质调整与性能优化实战

一、材质基础调整 1.1 颜色与透明度控制通过Material.color属性可直接修改材质颜色： material.color new THREE.Color(0xff0000); // 红色结合opacity属性实现透明效果： material.opacity 0.5; // 50%透明度如需动态调整，可通过Color.…...

编程日记 2025/6/29 1:34:31

QEMU模拟32位ARM实现自定义系统调用

实现自定义系统调用如何使用 QEMU 模拟32位 ARM 环境参考：使用Qemu模拟32位ARM系统修改linux内核源码使用 linux-4.4.240 源码，下载链接：下载链接在 arch\arm\include\uapi\asm\unistd.h 文件下新增系统调用 sys_test： /…...

编程日记 2025/6/29 1:40:04

AWS IoT Core自定义域名配置实战指南

在使用AWS IoT Core时,配置自定义域名可以为您的IoT解决方案带来多方面的好处。本文将详细介绍如何在AWS IoT Core中设置和使用自定义域名,包括证书配置、域名设置以及DNS记录创建等关键步骤。为什么要使用自定义域名? 使用自定义域名(也称为客户管理的域名)有以下几个主要…...

编程日记 2025/7/12 17:39:28

【C盘空间不足怎么办】

C 盘空间不足是一个常见的问题，即使感觉没怎么用，也可能被各种文件悄悄占满。这里分析一下常见的原因和排查方向： 一、常见的空间占用大户： Windows 系统文件和更新： Windows Update 缓存： 系统更新后&am…...

编程日记 2025/7/14 14:27:54

workman进阶应用 GatewayWorker 仿微信做聊天室

聊天室主要用到GatewayWorker ，它是对workerman的进一步封装 GatewayWorker基于Workerman开发的一个项目框架，用于快速开发TCP长连接应用，例如app推送服务端、即时IM服务端、物联网、智能家居等等。 1. 安装环境 1.1 首先下载框架 compos…...

编程日记 2025/6/29 4:25:27

WebRTC技术EasyRTC嵌入式音视频通信SDK打造远程实时视频通话监控巡检解决方案

一、方案概述在现代工业生产、基础设施维护等领域，远程监控与巡检工作至关重要。传统的监控与巡检方式存在效率低、成本高、实时性差等问题。EasyRTC作为一种先进的实时音视频通信技术，具备低延迟、高稳定性、跨平台等特性，能够有效解决这…...

编程日记 2025/6/29 3:14:46

window 显示驱动开发-创建分配时指定段

显示微型端口驱动程序指定并返回有关其内存段的信息，当视频内存管理器调用驱动程序的 DxgkDdiCreateAllocation 函数时，它更喜欢视频内存管理器使用这些信息。在调用 DxgkDdiCreateAllocation 时，驱动程序为视频资源创建分配。驱动程序在描…...

编程日记 2025/6/29 3:04:36

如何创建企业微信应用，如何给企业微信发送消息

首先打开你的企业微信然后在下面创建应用我创建的是 pes 设置域名和白名单等你要开发的时候就需要配置了然后就能直接在本地发送企业微信消息了切记要配置白名单ip 如果要获取所有部门信息，旧得接口已经不能用了，只能获取所有部门id 前提是…...

编程日记 2025/6/29 4:06:00

WM_TIMER定时器消息优先级低，可能会被系统丢弃，导致定时任务无法正常执行

之前在优化电子白板绘制曲线功能时就遇到WM_TIMER定时器消息被丢弃的问题。原先在绘制曲线图元时，左键按下后一直不放，拖动鼠标绘制曲线（不断绘制一些小线段形成曲线），等到左键弹起后完成一个完整曲线的绘制&#xff0…...

编程日记 2025/6/29 1:34:30

在Babylon.js中实现完美截图的艺术：包含Canvas和HTML覆盖层

在现代Web 3D应用开发中，Babylon.js作为强大的3D引擎被广泛应用。一个常见的需求是实现场景截图功能，特别是当场景中包含HTML覆盖层(如UI控件、菜单等)时。本文将深入探讨如何在Babylon.js中实现完整的截图方案。问题背景这里我是希望实现一个渐隐的…...

编程日记 2025/6/29 4:56:42

mac 10.15.7 svn安装

macOS 版本推荐 SVN 安装方式≤10.14Homebrew 安装独立 SVN≥10.15优先使用 CLT 自带 SVN 一、使用 brew 安装 （没成功） brew install subversion 这个方法安装一直不成功，一直在提示说版本旧或都是一些引用工具安装失败， 二、使…...

编程日记 2025/6/29 4:10:30

文件同步2

请大家思考如何使用scp命令去解决这个问题。有两种思路： 第一种：三个文件一个一个去拷贝。缺点是操作麻烦，要逐一操作。第二种：重新把A上的conf拷贝到B上。缺点是会重复拷贝文件1，2，3，4。 …...

编程日记 2025/6/29 5:05:47

el-select 结合 el-tree：树形下拉数据

一、单选 <template><div class"selectTree-wapper"><el-selectv-model"selectValue"placeholder"请选择"popper-class"custom-el-select-class"ref"selectRef"clearableclear"clearHandle">&…...

编程日记 2025/6/29 1:34:37

GOOSE 协议中MAC配置

在 GOOSE（Generic Object Oriented Substation Event）协议中，主站（Publisher）发送的 MAC 地址不需要与从站（Listener）的 MAC 地址一致，其通信机制与 MAC 地址的匹配逻辑取决于 GOOSE…...

编程日记 2025/6/29 4:17:45

11. CSS从基础样式到盒模型与形状绘制

在前端开发中，CSS（层叠样式表）是控制网页样式和布局的核心技术。整理了关于 CSS 基础样式、文本样式、盒模型以及形状绘制的一些心得。以下是详细的学习笔记。一、基础样式设置 1. 字体样式字体样式是网页视觉呈现的重要组成部分&#xf…...

编程日记 2025/7/9 4:07:31

【springcloud学习(dalston.sr1)】项目整体介绍（含源代码）（一）

当前项目是用来记录下以前学习过的springcloud的dalston.sr1版本，该版本目前来看已经过时了，这里仅做下学习记录分享（当前推荐学习spring cloud alibaba）。 springcloud主要用于大型项目，比如有一个电商项目&#xff…...

编程日记 2025/6/29 4:10:05

集成DHTMLX 预订排期调度组件实践指南:如何实现后端数据格式转换

在企业级应用中，预订系统（Booking System）作为典型的调度类应用，广泛用于酒店、会议室、设备预约、医疗排班等业务场景。而DHTMLX Scheduler作为一款功能强大且高度可定制的 JavaScript 日程安排控件，已成为众多开发者…...

编程日记 2025/6/29 1:40:02

ROS多机集群组网通信（四）——Ubuntu 20.04图形化配置 Ad-Hoc组网通信指南

引言在我之前的文章中已经讲解过Ad-Hoc网络的相关概念，以及如何使用网卡配置Ad-Hoc模式，实现局域网无中心路由通信。这篇文章主要讲解如何在ubuntu20.04上使用图形化配置工具来更方便的配置Ad-Hoc网络，实现组网通信。下面先复习一下之前的相…...

编程日记 2025/6/29 1:40:51

S7-1200 PLC与梅特勒-托利多IND360称重仪表通信

以下是使用西门子进行通信的方法及接线说明，基于常见的工业通信方案（如Modbus RTU或Modbus TCP）。由于IND360通常支持Modbus协议，而S7-1200需通过附加模块或库实现通信，以下分两种场景说明。一、通信方案选择 Modbus …...

编程日记 2025/6/29 1:55:58

网络安全侦察与漏洞扫描One-Liners

在网络安全领域，侦察（Reconnaissance）和漏洞扫描是发现潜在安全风险的重要步骤。本文整合了一系列高效的命令行工具和脚本，涵盖子域名枚举、漏洞扫描、资产发现和信息提取等技术，旨在为安全研究人员和渗透测试人员提供…...

编程日记 2025/6/29 1:34:59

React Native告别图标体积大手动更换慢的噩梦：让图标更新像修改文字一样简单

写在前面：凌晨三点的图标战争 “所有图标都要换成圆角风格，明天上线！”——产品经理这条消息弹出时，我的保温杯差点从手中滑落。扫了一眼项目中的347个图标文件，我知道今晚又是个不眠夜。但就在绝望之际，同事发来一个GIF：他只是在终端输入了iconfont-rn --update，所有…...

编程日记 2025/6/29 4:46:05

【机器学习赋能的智能光子学器件系统研究与应用】

在人工智能与光子学设计融合的背景下，科研的边界持续扩展，创新成果不断涌现。从理论模型的整合到光学现象的复杂模拟，从数据驱动的探索到光场的智能分析，机器学习正以前所未有的动力推动光子学领域的革新。据调查，目前…...

编程日记 2025/6/29 3:22:32

信奥赛-刷题笔记-队列篇-T2-P1540机器翻译和P2952Cow Line S

总题单本部分总题单如下【腾讯文档】副本-CSP-JSNOI 题单 (未完待续) https://docs.qq.com/sheet/DSmJuVXR4RUNVWWhW?tabBB08J2 队列篇题单 P1540 [NOIP 2010 提高组] 机器翻译 https://www.luogu.com.cn/problem/P1540 题目背景 NOIP2010 提高组 T1 题目描述小晨…...

编程日记 2025/7/10 6:21:18

ESP32C3连接wifi

文章目录 🔧 一、ESP32-C3 连接 Wi-Fi 的基本原理（STA 模式）✅ 二、完整代码注释讲解（适配 ESP32-C3）📌 三、几个关键点解释🔚 四、小结 🔧 一、ESP32-C3 连接 Wi-Fi 的基本原理&a…...

编程日记 2025/7/14 21:00:10

nvidia驱动更新-先卸载再安装-ubuntu

显卡驱动升级前，卸载旧版本，可采用两种方式。 1.命令行 （1）查找已安装的 NVIDIA 驱动和相关包：dpkg -l | grep nvidia （2）完全卸载 NVIDIA 驱动：sudo apt remove purge nvidia-*…...

编程日记 2025/6/29 1:43:55

SparkSQL 连接 MySQL 并添加新数据：实战指南

SparkSQL 连接 MySQL 并添加新数据：实战指南在大数据处理中，SparkSQL 作为 Apache Spark 的重要组件，能够方便地与外部数据源进行交互。MySQL 作为广泛使用的关系型数据库，与 SparkSQL 的结合可以充分发挥两者的优势。本文将详细…...

编程日记 2025/6/29 1:34:35

Tomcat与纯 Java Socket 实现远程通信的区别

Servlet 容器（如 Tomcat） 是一个管理 Servlet 生命周期的运行环境，主要功能包括： 协议解析：自动处理 HTTP 请求/响应的底层协议（如报文头解析、状态码生成）； 线程…...

编程日记 2025/6/29 1:35:18

Ubuntu 18.04.6下OpenSSL与OpenSSH版本升级

文章目录升级背景下载必要软件包安装 zlib创建目录解压文件安装前置依赖离线安装依赖编译安装 zlib 安装 OpenSSL检查当前版本创建安装目录下载并解压 OpenSSL配置与安装验证安装解决动态库依赖问题永久更新环境变量安装OpenSSL常见错误离线安装 Telnet 服务端指南1. 在联网机…...

编程日记 2025/6/29 3:14:50

BFS算法篇——从晨曦到星辰，BFS算法在多源最短路径问题中的诗意航行（下）

文章目录引言一、01矩阵1.1 题目链接：https://leetcode.cn/problems/01-matrix/description/1.2 题目分析：1.3 思路讲解：1.4 代码实现： 二、飞地的数量2.1 题目链接：https://leetcode.cn/problems/number-of-enclaves…...

编程日记 2025/6/29 5:05:38

Cold Diffusion: Inverting Arbitrary Image Transforms Without Noise论文阅读

冷扩散：无需噪声的任意图像变换反转摘要标准扩散模型通常涉及两个核心步骤：图像降质 （添加高斯噪声）和图像恢复 （去噪操作）。本文发现，扩散模型的生成能力并不强烈依赖于噪声的选择&#xf…...

编程日记 2025/6/29 3:41:27

c++进阶——哈希表的实现

文章目录哈希表的实现unordered_map和unordered_set哈希的引入散列的一些基本概念将Key转成整形和哈希函数哈希冲突负载因子开放定址法和链地址法哈希函数的选取除法散列法/除留余数法乘法散列法全域散列法(了解)其他方法（了解） 针对于开放定址法的哈希…...

编程日记 2025/7/1 10:47:37

visual studio生成动态库DLL

visual studio生成动态库DLL 创建动态库工程注意 #include “pch.h” 要放在上面完成后点击生成创建一个控制台项目设置项目附加目录为刚才创建的动态库工程Dll1： 配置附加库目录： 配置动态库的导入库（.lib）：链…...

编程日记 2025/6/29 3:14:01