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

web前端开发:CSS的常用选择器

CSS常用选择器

     CSS选择器是用于精准定位HTML元素并对其应用样式的核心工具。它的作用类似于“筛选器”,通过特定规则匹配文档中的元素,从而实现样式控制。

核心作用

  1. 定位元素
    通过元素名称、类名、ID、属性等条件,快速找到需要样式化的目标元素。

  2. 应用样式规则
    将CSS声明(如颜色、布局等)绑定到匹配的元素上,实现视觉设计。

  3. 实现结构控制
    通过层级关系(如父子、兄弟元素)精准控制复杂布局。

常见选择器类型与用途

选择器类型示例作用
元素选择器p选中所有<p>标签
类选择器.header选中所有class="header"的元素
ID选择器#main选中id="main"的唯一元素
属性选择器[type="text"]选中具有特定属性值的元素(如表单输入)
后代选择器div p选中<div>内所有嵌套层级的<p>
子选择器ul > li仅选中<ul>的直接子元素<li>
伪类选择器a:hover匹配元素的特定状态(如悬停、聚焦)
伪元素选择器p::first-line选中元素的某部分(如首行、占位内容)
群组选择器h1, h2同时选中多个元素

实际应用场景

  1. 统一样式
    用类选择器(.button)为多个按钮添加相同样式。

  2. 响应交互
    用伪类(:hover)实现鼠标悬停效果。

  3. 精准定位
    用后代选择器(.nav li)控制导航菜单项样式,避免影响其他列表。

  4. 动态适配
    用属性选择器([data-active="true"])标记活动状态的组件。

为什么重要?

  • 减少代码冗余:通过选择器复用样式,避免重复编写。

  • 提升可维护性:修改一处选择器即可全局更新样式。

  • 实现复杂设计:支持层叠、继承等特性,适配多样布局需求。

 

最佳实践

  • 避免过度依赖!important,优先使用特异性(Specificity)控制样式优先级。

  • 谨慎使用通用选择器(*),防止性能损耗。

  • 利用CSS预处理器(如Sass)的嵌套语法简化复杂选择器。

通过灵活组合选择器,开发者可以高效、精准地控制网页外观与交互逻辑。

 

常用选择器介绍: 

常用的选择器有:

        ID选择器、类选择器、元素选择器、后代选择器、群组选择器、子选择器、兄弟选择、通配符选择器、伪类选择器、伪元素选择器。

        

1.ID选择器

  • 作用:通过元素的 id 属性选择唯一元素(如 #header)。

  • 优点:精确,权重高,适合唯一元素样式。

  • 缺点:不可复用,过度使用易导致样式难以维护。

  • 权重100(最高,仅次于内联样式)。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">#ps{/* id选择器 */color: brown;}</style></head><body><!-- ID选择器 --><p id="ps">这是ID选择器</p></body>
</html>

 2. 类选择器

  • 作用:通过 class 属性选择多个元素(如 .button)。

  • 优点:灵活复用,适合组件化开发。

  • 缺点:命名需规范,避免冲突。

  • 权重10

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">.ps1{color: blue;}/* 多个类名*/.a{font-size: 20px}.b{color: #ff4100}.c{background-color: red} </style></head><body><!-- 类选择器 --><p class="ps1">这是class选择器</p><p class="ps1">这是class选择器</p><p class="ps1">这是class选择器</p><p class="ps1">这是class选择器</p><!-- 多个类名 --><div class="a b c"></div></body>
</html>

3. 元素选择器(标签选择器)

  • 作用:通过标签名选择元素(如 pdiv)。

  • 优点:简单通用,适合全局样式。

  • 缺点:不够精准,可能影响同类标签。

  • 权重1

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">p{color: yellow;}div{color:pink;}h1{color: orchid;}li{color: #FF0000;}ul{background-color: deepskyblue;}ol{background-color: gray;}</style></head><body><!-- 标签名选择器 --><p>这是标签名选择器</p><div>这是标签名选择器</div><h1>这是标签名选择器</h1><ul><li>这是标签名选择器</li></ul><ol><li>这是标签名选择器</li></ol></body>
</html>

4. 后代选择器

  • 作用:选择某元素内的所有后代元素(如 div p)。

  • 优点:层级匹配,适合嵌套结构。

  • 缺点:性能略低,过度嵌套难维护。

  • 权重:各选择器权重之和(如 div p 为 1 + 1 = 2)。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">.uls li{color: deepskyblue;}ol li{color: gray;}</style></head><body><!-- 后代选择器 --><ul class="uls"><li>ul的后代1</li><li>ul的后代1</li><li>ul的后代1</li></ul><ol><li>ol的后代1</li><li>ol的后代1</li><li>ol的后代1</li></ol></body>
</html>

5. 群组选择器

  • 作用:同时选择多个选择器(如 h1, h2, .title)。

  • 优点:减少重复代码,统一样式。

  • 缺点:选择器独立计算权重,可能意外覆盖。

  • 权重:按群组中最高权重的选择器计算。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">.dis{background-color: blue;}.test{background-color: red;}/* 有相同属性时用群组最合适 */.dis,.test{color: #fff;}</style></head><body><!-- 群组选择器 --><div class="dis">群组1</div><p class="test">群组2</p></body>
</html>

 

6. 子选择器

  • 作用:仅选择直接子元素(如 ul > li)。

  • 优点:精准控制层级,避免深层影响。

  • 缺点:结构变化时需调整选择器。

  • 权重:各选择器权重之和(如 ul > li 为 1 + 1 = 2)。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">.list>li{color: red;width: 200px;height: 400px;}.uls>li{color: #ff4100;}</style></head><body><!-- 子选择器 --><ul class="list"><li>外部li<ul class="uls"><li>内部li</li></ul></li></ul></body>
</html>

 

7. 兄弟选择器

  • 相邻兄弟(+:选择紧接的同级元素(如 h2 + p)。

  • 通用兄弟(~:选择后续所有同级元素(如 h2 ~ p)。

  • 优点:基于位置定位元素。

  • 缺点:使用场景有限。

  • 权重:各选择器权重之和(如 h2 + p 为 1 + 1 = 2)。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用的选择器</title><style type="text/css">.dis1+.test{color: blue;}</style></head><body><!-- 兄弟选择器 --><div class="dis1">兄弟1</div><p class="test1">兄弟2</p></body>
</html>

 

8. 通配符选择器

  • 作用:匹配所有元素(*)。

  • 优点:快速重置默认样式。

  • 缺点:性能较差,易引发全局影响。

  • 权重0(最低)。

* {color: #000;margin: 0;padding: 0;text-decoration: none;font-size: 16px;font-weight: normal;list-style: none;}

 

9. 伪类选择器

  • 作用:选择元素的特定状态或位置(如 :hover:nth-child(2))。

  • 优点:实现动态交互和复杂逻辑选择。

  • 缺点:部分伪类兼容性需注意。

  • 权重10(与类相同)。

<style>.content {background-color: #666;}.content>h1:nth-child(1) {color: aquamarine;}.content>p:nth-child(2) {color: aquamarine;}.content>p:nth-of-type(1) {color: aquamarine;}.content span:nth-child(6) {color: blue;}.content span:nth-of-type(1) {color: rgb(0, 255, 140);}.baidu:link {color: red;}.baidu:hover {color: gray;}.baidu:active {color: green;}.baidu:visited {color: yellow;}h1:hover {color: goldenrod;}.content h1 {position: relative;}</style>

 

10. 伪元素选择器

  • 作用:创建虚拟元素并添加样式(如 ::before::first-line)。

  • 优点:无冗余 HTML 实现装饰效果。

  • 缺点:生成内容不可选中,需谨慎使用。

  • 权重1(与元素选择器相同)。

  <style>         .content h1::before {content: "aaaaaa";}.content h1::after {content: "陵";font-size: 14px;color: red;position: absolute;top: 4px;left: 26%;}</style>

 

CSS选择器权重(重点)  

CSS优先级

        定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,

        1> 选择器相同,则执行层叠性

        2> 选择器不同,就会出现优先级的问题。

权重计算公式

标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素(标签选择器)0,0,0,1
每个类,伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
每个!important 重要的∞ 无穷大

 

权重计算规则

  • 内联样式1000 > ID100 > 类/伪类/属性10 > 元素/伪元素1 > 通配符0

  • 组合选择器:权重累加(如 .nav li.active 权重为 10 + 1 + 10 = 21)。

 

总结

  • 优先使用类选择器:灵活且权重适中,适合组件化开发。

  • 谨慎使用 ID 选择器:高权重易导致样式难以覆盖。

  • 避免过度嵌套:后代选择器易增加维护成本和性能负担。

  • 合理使用伪类/伪元素:增强交互性,但注意兼容性。

        通过组合选择器并管理权重,可编写出高效、易维护的 CSS 代码。推荐结合 BEM 等方法规范命名,减少选择器复杂度。

 

 

相关文章:

web前端开发:CSS的常用选择器

CSS常用选择器 CSS选择器是用于精准定位HTML元素并对其应用样式的核心工具。它的作用类似于“筛选器”&#xff0c;通过特定规则匹配文档中的元素&#xff0c;从而实现样式控制。 核心作用 定位元素 通过元素名称、类名、ID、属性等条件&#xff0c;快速找到需要样式化的目标元…...

Mathematica 中,将含有小数的表达式转换为整数或分数形式

具体方法和示例&#xff1a; 1. 使用 Rationalize 函数 Rationalize[x] 将小数 x 转换为最接近的有理数&#xff08;分数形式&#xff09;&#xff0c;可指定精度容忍度。 示例&#xff1a; Rationalize[0.25] (* 输出: 1/4 *) Rationalize[3.14159, 0.001] (* 输出:…...

在 Ubuntu 下通过 Docker 部署 Mastodon 服务器的详细教程

大家好&#xff01;今天我们来聊聊如何在 Ubuntu 系统上通过 Docker 部署 Mastodon 服务器。Mastodon 是一个开源的社交网络平台&#xff0c;类似于 Twitter&#xff0c;但更注重隐私和去中心化。Docker 则是一个非常流行的容器化平台&#xff0c;能够让我们轻松地打包、分发和…...

JavaScript基础-01(笔记)

前期&#xff1a;js变量 数据类型 数据类型检测 类型转换 数据类型 //// 基本数据类型 存放到栈// a.Number 数字类型(包含整数 小数)var num1var num1.23443var num2222// NaN 非数字类型或者不能转为数字&#xff08;例&#xff1a;1,"1"&#xff0c;"1233…...

【C语言基础】C++ 中的 `vector` 及其 C 语言实现详解

一、C 中的 vector&#xff1a;动态数组的核心特性 1. 基本概念 vector 是 C 标准模板库&#xff08;STL&#xff09;中的动态数组容器&#xff0c;支持自动扩容、高效元素访问和丰富的操作接口。其核心特性包括&#xff1a; 动态内存管理&#xff1a;自动调整容量&#xff0…...

记录待办事项的便签软件有没有推荐的?

在快节奏的现代生活中&#xff0c;我们每天都要处理大量的工作任务和生活琐事&#xff0c;稍有不慎就可能遗漏重要事项。你是否经常遇到这样的情况&#xff1a;明明记得有件事要做&#xff0c;却怎么也想不起来是什么&#xff1b;或者手头同时有好几项任务&#xff0c;却不知道…...

华为OD机试真题——硬件产品销售方案(2025A卷:100分)Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分 题型 本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析&#xff1b; 并提供Java、python、JavaScript、C、C语言、GO六种语言的最佳实现方式&#xff01; 华为OD机试真题《硬件产品销售方案》&#xff1a; 目录 题目名称&#xff1…...

鸿蒙应用元服务开发-Account Kit未成年人模式订阅和处理用户信息变更

一、概述 通过订阅用户信息变更&#xff0c;您可以接收有关用户及其账户的重要更新。当用户取消元服务的授权信息、注销华为账号时&#xff0c;华为账号服务器会发送通知到元服务&#xff0c;元服务可以根据通知消息进行自身业务处理。 二、用户信息变更事件介绍 三、订阅用…...

优化 Dockerfile 性能之实践(Practice of Optimizing Dockerfile Performance)

优化 Dockerfile 性能之实践 构建 Docker 镜像时&#xff0c;Dockerfile 的性能会显著影响构建过程的效率。经过优化的 Dockerfile 可以缩短构建时间、最小化镜像大小并提高整体容器性能。在本文中&#xff0c;我们将探讨优化 Dockerfile 性能的最佳实践。 尽量减少层数 影响…...

OpenShift介绍,跟 Kubernetes ,Docker关系

1. OpenShift 简介 OpenShift是一个开源项目,基于主流的容器技术Docker及容器编排引擎Kubernetes构建。可以基于OpenShift构建属于自己的容器云平台。OpenShift的开源社区版本叫OpenShift Origin,现在叫OKD。 OpenShift 项目主页:https://www.okd.io/。OpenShift GitHub仓库…...

Go:包和 go 工具

引言 通过对关联特性分类&#xff0c;组成便于理解和修改的单元&#xff0c;使包与程序其他包保持独立&#xff0c;助力大型程序的设计与维护 。模块化让包可在不同项目共享、复用、发布及全球范围使用。 每个包定义不同命名空间作为标识符&#xff0c;关联具体包&#xff0c…...

GIS开发笔记(5)结合osg及osgEarth实现虚线环形区域绘制

一、实现效果&#xff1a;输入中点坐标点、内圆半径、外圆半径&#xff0c;绘制坐标点所在高度的水平面的两个圆形形成环形区域。 二、实现原理&#xff1a; 创建中心点所在平面的圆形几何体&#xff0c;将其分别挂接到同一个节点上&#xff0c;再将该节点挂接到用户绘制组节…...

天线静电防护:NRESDTLC5V0D8B

一. 物联网天线的使用环境 1.1 联网天线广泛应用于智能家居领域&#xff0c;比如智能门锁、智能摄像头等设备中&#xff0c;通过天线实现设备与家庭网络的连接&#xff0c;用户可以远程控制和监控家居设备。以智能摄像头为例&#xff0c;它通过天线将拍摄的画面实时传输到用户…...

Linux进程相关选择题及解析

1. 关于Linux进程创建,以下说法正确的是? A. fork()函数调用后,子进程从父进程的fork()之后开始执行 B. fork()函数返回两次,父进程返回子进程PID,子进程返回0[10][11] C. exec函数族会替换当前进程的代码段,但保留数据段和堆栈 D. wait()函数只能等待直接子进程退出 答…...

Day(22)--网络编程习题

习题 以下是这些 TCP 通信练习题的 Java 代码实现及解析&#xff1a; TCP 通信练习 1 - 多发多收 客户端&#xff08;Client1.java&#xff09; java import java.io.IOException; import java.io.OutputStream; import java.net.Socket; ​ public class Client1 {public…...

Kubernetes 节点摘除指南

目录 一、安全摘除节点的标准流程 1. 确认节点名称及状态 2. 标记节点为不可调度 3. 排空&#xff08;Drain&#xff09;节点 4. 删除节点 二、验证节点是否成功摘除 1. 检查节点列表 2. 检查节点详细信息 3. 验证 Pod 状态 三、彻底清理节点&#xff08;可选&#xf…...

SM4密码算法的CPA攻击技术

SM4算法简介 可参见博文 SM4分组密码算法研究。 SM4密码算法的CPA攻击技术 相关功耗攻击(CPA)是侧信道功耗分析攻击中较为常见的攻击方法之一,攻击者利用密码算法执行过程中,在侧信道泄露的信息(如时序、能量、缓存等)和通信信道的消息(如明文、私钥等)进行测试,通过…...

Golang|KVBitcask

文章目录 初识KVbitcask论文详解 初识KV bitcask论文详解 论文地址&#xff1a;https://riak.com/assets/bitcask-intro.pdf理想的存储引擎&#xff0c;应该满足下面一些特点&#xff1a;...

【Python进阶】元组:不可变序列的十大核心应用

目录 前言&#xff1a;技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块技术选型对比 二、实战演示环境配置要求核心代码实现&#xff08;10个案例&#xff09;案例1&#xff1a;基础创建与访问案例2&#xff1a;解包…...

centos安装libheif

参考 解决docker: Error response from daemon: Get “https://registry-1.docker.io/v2/“:连接超时问题_error response from daemon :get-CSDN博客 HEIF编解码器安装 - navyum - 博客园 ​​​​​​https://github.com/strukturag/libheif #升级gcc yum install centos…...

初步认识Model Context Protocol (MCP) Java SDK

1. Maven如何下载MCP Java SDK 基础配置(核心模块) 在您的pom.xml文件中添加以下依赖: <dependencyManagement> <dependencies> <dependency> <groupId>io.modelcontextprotocol.sdk</groupId> <artifactI…...

第三章 爬虫提速、selenium模块、requests模块进阶(终)

目录 一.requests进阶 &#xff08;一&#xff09;处理cookie &#xff08;二&#xff09;防盗链 &#xff08;三&#xff09;代理 二.爬虫提速 &#xff08;一&#xff09;线程池和进程池 &#xff08;二&#xff09;协程 &#xff08;三&#xff09;异步http请求-aio…...

unity使用内建组件给刚体增加重力

2019年3月9日11:10:24 unity开发中&#xff0c;有时候发现刚体上的重力不能满足我们的需要&#xff0c;可以通过使用内建组件Constant Force来增加重力&#xff1a; 在游戏对象上。请按照以下操作&#xff1a; 为Player添加一个名为Constant Force组件&#xff0c;选择Player在…...

Java开发中的设计模式之观察者模式详细讲解

观察者模式&#xff08;Observer Pattern&#xff09;是一种行为型设计模式&#xff0c;它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都会自动收到通知并更新。这种模式在Java开发中非常常见&#xff0c;尤其是在事件驱…...

【学习笔记】计算机网络(九)—— 无线网络和移动网络

第9章 无线网络和移动网络 文章目录 第9章 无线网络和移动网络9.1 无线局域网WLAN9.1.1 无线局域网的组成9.1.2 802.11局域网的物理层9.1.3 802.11局域网的MAC层协议CSMA 协议CSMA/CD 协议 - 总线型 - 半双工CSMA/CA 协议 9.1.4 802.11局域网的MAC帧 9.2 无线个人区域网WPAN9.3…...

一个基于Django的写字楼管理系统实现方案

一个基于Django的写字楼管理系统实现方案 用户现在需要我用Django来编写一个写字楼管理系统的Web版本&#xff0c;要求包括增删改查写字楼的HTML页面&#xff0c;视频管理功能&#xff0c;本地化部署&#xff0c;以及人员权限管理&#xff0c;包含完整的代码结构和功能实现&am…...

C++面试考点:类(class)

1、类的定义 C中的类提供了面向对象编程、继承与多态的机制。其构成包括成员&#xff08;各种自定义数据&#xff09;、行为&#xff08;定义的函数操作&#xff09;、封装&#xff08;private、public、protected&#xff09;。核心是了解类的继承机制&#xff0c;以及各种封装…...

ThreadPoolExecutor 多线程用requests请求一个地址的时候为什么会报错,而多进程用requests请求一个地址的时候不会报错,为什么?

网络请求行为 多线程&#xff1a;requests 库底层依赖 urllib3&#xff0c;而 urllib3 使用连接池管理网络请求。在多线程环境中&#xff0c;连接池可能会因为线程间的竞争导致连接泄漏或超时。 多进程&#xff1a;每个进程独立管理自己的连接池&#xff0c;因此不会出现线程间…...

数据库脱裤

假设你已经getshell 找到mysql账号密码。 网站要连接mysql&#xff0c;就需要把mysql的账号密码保存在一个php文件中&#xff0c;类似config.php、common.inc.php等&#xff0c;在shell中&#xff0c;读取这些文件&#xff0c;找到其中信息即可 下面是一些常见平台的配置文…...

十二,<FastApi>中间件

什么是中间件? "中间件"是一个函数,它在每个请求被特定的路径操作处理之前,以及在每个响应之后工作. 代码示例: from fastapi import FastAPI, Response from fastapi import Request import uvicornapp FastAPI()app.middleware("http") async def m2…...

欢迎使用Markdown编辑器

使用Markdown编辑器 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注…...

RabbitMQ架构原理及消息分发机制

RabbitMQ架构原理及消息分发机制 在现代分布式系统中&#xff0c;消息队列是不可或缺的组件之一。它不仅能够解耦系统模块&#xff0c;还能实现异步通信和削峰填谷。在众多消息队列中&#xff0c;RabbitMQ 因其高并发、高可靠性和丰富的功能而备受青睐。本文将从 RabbitMQ 的基…...

智能麻将出牌组件

开篇引言​ 麻将作为一款风靡全球的策略性游戏&#xff0c;其复杂的规则和多变的牌局给玩家带来了无尽乐趣。在数字化时代&#xff0c;运用编程技术为麻将游戏赋予智能&#xff0c;实现自动出牌功能&#xff0c;不仅能提升玩家体验&#xff0c;还能深入探索算法在博弈游戏中的…...

python脚本补充

本文是对实用的 Python 小脚本_python写脚本-CSDN博客的一点补充。对简单脚本的一些操作上的优化。 ###Utilities ### ###重命名文件名 import os import tkinter as tk from tkinter import filedialog, simpledialog, messageboxdef batch_rename():# 弹出文件夹选择对话框d…...

【经验记录贴】活用shell,提高工作效率

背景 最近在做测试的时候&#xff0c;需要手动kill服务的进程&#xff0c;然后通过命令重启服务&#xff0c;再进行测试。每次重启都会涉及到下面三个命令的执行&#xff1a; 1&#xff09;检索进程ID $ ps -elf | grep programname root 1123 112 1234 0 0 0 0:00…...

出现 ERR_CERT_COMMON_NAME_INVALID | 301 302 重定向的解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法前言 🤟 找工作,来万码优才:👉 #小程序://万码优才/r6rqmzDaXpYkJZF 爬虫神器,无代码爬取,就来:bright.cn 1. 问题所示 执行代码时,出现如下提示: GET https://xxxx/admin-api/system...

解决本地浏览器访问服务器端语音识别项目显示“麦克风未授权”的问题

解决本地浏览器访问服务器端语音识别项目显示“麦克风未授权”的问题 在 chrome://flags 启用特殊权限&#xff08;不推荐长期启用&#xff09; 在浏览器地址栏输入&#xff1a; chrome://flags然后搜索&#xff1a; Insecure origins treated as secure 找到类似项&#xff…...

【数论】线性筛质数

线性筛质数 在之前的一篇筛质数的文章中只解释了埃式筛质数的方法&#xff0c;没有解释线性筛质数的方法 我们先看一下线性筛质数的代码 【例题】 给定一个正整数 n&#xff0c;请你求出 1∼n 中质数的个数。 输入格式 共一行&#xff0c;包含整数 n。 输出格式 共一行…...

视频孪生重构施工逻辑:智慧工地的数字化升级

当"智慧工地"概念在2017年首次写入《建筑业发展"十三五"规划》时&#xff0c;行业普遍将其等同于摄像头与传感器的简单叠加。十年数字浪潮冲刷下&#xff0c;智慧工地的内涵已发生本质跃迁&#xff1a;从工具层面的信息化改造&#xff0c;进化为基于视频数…...

【Lerobot】加载本地数据LeRobotDataset数据、读取并解析parquet

官方例子&#xff1a;https://github.com/huggingface/lerobot/blob/main/examples/1_load_lerobot_dataset.py https://github.com/NVIDIA/Isaac-GR00T/blob/main/getting_started/LeRobot_compatible_data_schema.md 使用SO100机械臂进行数据采集后&#xff0c;得到如下格式…...

卷积神经网络 CNN 模型介绍

卷积神经网络 CNN 模型介绍 一、经典CNN模型1. LeNet-5&#xff08;基础模型&#xff09;2. AlexNet3. VGGNet&#xff08;VGG16/VGG19&#xff09;4. ResNet&#xff08;残差网络&#xff09; 二、轻量化CNN模型1. MobileNet系列2. EfficientNet3. ShuffleNet 三、改进型CNN模…...

Vue —— 实用的工具函数

目录 响应式数据管理1. toRef 和 torefs2. shallowRef 和 shallowReactive3. markRaw 依赖追踪与副作用1. computed2. watch 和 watchEffect 类型判断与优化1. unref2. isRef 、isReactive 和 isProxy 组件通信与生命周期1. provide 和 inject2. nextTick 高级工具1. useAttrs …...

Langchain + Gemini API调用基本操作

本文参考Langchain中ChatGoogleGenerativeAI的官方文档&#xff0c;在本地的jupyter notebook中运行。 关于API的细节在官方文档最开头给出&#xff1a; 我们在使用时&#xff0c;可以选择model"gemini-2.0-flash-001"或者生成图片的ChatGoogleGenerativeAI(model“…...

软件线上故障复盘报告

软件线上故障复盘报告‌ ‌故障编号‌&#xff1a;INC-2024XXX ‌复盘日期‌&#xff1a;YYYY-MM-DD ‌参与人员‌&#xff1a;研发/运维/测试/产品/客服负责人 一、故障概况 1.1 基础信息 字段内容数据来源故障等级P0/P1/P2&#xff08;参考SLA分级标准&#xff09;运维告警…...

分享:批量提取图片文字并自动命名文件,ocr识别图片指定区域并重命名文件名工具,基于WPF和腾讯OCR识别的接口的视线方案

一、项目背景 在处理大量图片时,常常需要从图片中提取特定区域的文字信息,并依据这些信息对图片进行重命名。例如,在档案管理领域,大量纸质文件被扫描成图片后,需要从图片中提取关键信息(如文件编号、日期等)来重命名图片,以便后续的检索和管理;在电商领域,商家可能…...

SIMULIA-Abaqus有限元分析软件针对汽车行业的解决方案

汽车行业是Abaqus软件的一个重要应用领域&#xff0c;许多知名的汽车企业都是Abaqus的用户&#xff0c;本文为您重点介绍Abaqus针对汽车行业有哪些应用及其解决方案。 Abaqus是一款什么软件&#xff1a; Abaqus公司是世界知名的计算机仿真行业的软件公司&#xff0c;成立于197…...

linux下使用php修改php.ini的session.save_path无效的解决办法

linux下安装php的组合还是php-fpm和nginx&#xff0c;其实已经安装好了&#xff0c;网站已经能够跑起来了&#xff0c;但是遇到后台登录的时候验证码一直不对&#xff0c;看了下报错&#xff0c;session无法存储&#xff0c;于是新增了一个phpinfo文件&#xff0c;使用web查看下…...

脚本-QQ批量发送消息(图片和文字)

目录 代码 代码功能详解 注意事项 致谢 代码 import io import traceback import win32clipboard import pyautogui import pyperclip import win32gui # 替换为pywin32的正确模块名 import pandas as pd import time from PIL import Imageclass QQAutoMessage:def __in…...

高等数学A1 期末救济(导数)

基于song复习 闭区间上连续函数的性质 在闭区间里&#xff0c;f(x)连续> f(x)有界 导数 导数三种定义及不同写法 常用导数公式 可导→连续&#xff0c;但连续❎→可导 切线类问题求解 求某点切线方程与求过某点的切线方程 反函数求导法则 反函数的导数直接函数导数的导数 例…...

前端VUE框架理论与应用(7)

一、用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。 在 v-for 块中,我们可以访问所有父作用域的属性。v-for 还…...