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

CSS选择器

文章目录

  • 基本选择器
  • 复合选择器
    • 交集选择器
    • 并集选择器
    • 后代选择器
    • 子代选择器
    • 兄弟选择器
      • 相邻兄弟选择器
      • 通用兄弟选择器
  • 属性选择器
  • 伪类选择器
    • 动态伪类
    • 结构伪类
      • :first-child
      • :last-child
      • :nth-child
      • :nth-last-child
      • :first-of-type
      • :last-of-type
      • :nth-of-type
      • :nth-last-of-type
      • :only-child
      • :only-of-type
      • :root
      • :empty
    • 否定伪类
      • :not
    • UI伪类
    • 目标伪类
    • 语言伪类
  • 伪元素选择器
    • ::first-letter
    • ::first-line
    • ::first-selection
    • input::placeholder
    • ::before和::after
  • 选择器优先级

b站学习视频

基本选择器

  1. 通配选择器*{属性名: 属性值}
  2. 元素选择器元素名{属性名: 属性值}
  3. 类选择器.类名{属性名: 属性值}
  4. ID选择器.ID名{属性名: 属性值}

复合选择器

复合(组合)

交集选择器

同时满足多个基本选择器的情况(且):

  1. 元素+类p.big(元素后面紧跟类选择器,用得较多)
  2. 元素+类+IDp.big#id(不太用,而是直接用ID选择器)
  3. 多个类.big.red(用得少,可以另起一个新的类名)

并集选择器

满足某一个基本选择器的情况(或):选择器之间用逗号隔开。
例如:.big,.red,#id,p{属性名: 属性值}

后代选择器

用空格隔开,以元素为例:ul li{}ul li span{}
也可以有ID、类的组合。

子代选择器

>,左右也可以加空格div > p或者div>p:

    <style>div > p{color: aqua;}div>div>p{color: blueviolet;}</style><div><p>Ken</p><p>Jack</p><p>Lucy</p><div><p>John</p></div></div>

兄弟选择器

相邻兄弟选择器

+(左右也可以加空格),例如下面是选择div下面紧紧相邻的p元素。
如果下面相邻的那个不是p元素,则不会继续向下寻找。

    <style>div + p {color: aqua;}</style></head><body><p>Jack</p><div>Ken</div><p>Elaine</p><p>Tom</p>

通用兄弟选择器

~,则选择div下面所有兄弟p元素:div~p{}

属性选择器

  1. 选择具有某个属性的元素
    例如,具有title属性的p元素:
    <style>[title] {color: aqua;}</style></head><body><p title="J">Jack</p><p>Ken</p><p>Elaine</p>
  1. 选择具有某个属性,且属性值为xxx的元素
    <style>[title="K"] {color: aqua;}</style></head><body><p title="J">Jack</p><p title="K">Ken</p><p>Elaine</p>
  1. 选择具有某个属性,且属性值以xxx开头的元素
    例如,以K开头:
    <style>[title^="K"] {color: aqua;}</style></head><body><p title="J">Jack</p><p title="K">Ken</p><p title="K2">Elaine</p>
  1. 属性值以xxx结尾的元素:[title$="K"]
  2. 属性值包含xxx的元素:[title*="K"]

伪类选择器

伪类:是元素特殊状态的一种描述,很像类,但不是类。
伪类选择器,可以选中特殊状态的元素。

动态伪类

因为和鼠标交互密切相关,所以是“动态”的。

  1. a标签
    例如,超链接a,有访问过和未访问过两种状态,还有鼠标悬浮时、鼠标点击(激活)时的两种状态。
    设置这四种状态时,必须按照lvha的顺序,否则有的状态将不起作用。因为link->hover->active是正常的交互顺序,visited->hover->active也是正常的交互顺序,合并后就是lvha顺序。
    <style>/* 没访问过时 */a:link{color: gray;}/* 访问过 */a:visited{color: aqua;}/* 鼠标悬浮时 */a:hover{color:blueviolet}/* 激活时,即鼠标点击落下时 */a:active{color:blue;}</style></head><body><a href="http://www.baidu.com">AAA</a><a href="http://www.jd.com">BBB</a></body>
  1. input、select标签的focus(聚焦)
    当鼠标点击文本框(即将输入文本),或者点击下拉框时(即将选择某一项)的状态。
    表单类的元素才有这个状态。
    交互方式有:鼠标点击、触摸点击、tab键切换。
    <style>input:focus{background-color: aquamarine;}select:focus{background-color: aquamarine;}</style></head><body><input type="text"/><select><option value="1">A</option><option value="2">B</option></select>

结构伪类

:first-child

选择第一个儿子元素:first-child
div>p:first-child或者p:first-child

    <style>div>p:first-child{background-color: aquamarine;}</style></head><body><div><p>Ken</p><p>Elaine</p><p>Jack</p></div>

是先找第一个儿子,再判断是不是p元素。

例如应用到下面结构时,则没有匹配的元素(第一个儿子span不是p元素):

    <div><span>John</span><p>Ken</p><p>Elaine</p><p>Jack</p></div>

不是找第一个p元素,而是先找到第一个元素span,再判断是不是p。

:last-child

找最后一个儿子元素。

:nth-child

从1开始,第n个儿子元素。

    <style>p:nth-child(3){background-color: aquamarine;}</style></head><body><div><span>John</span><p>Ken</p><p>Elaine</p><p>Jack</p></div>

参数(必须是an+b的形式):

  • 空、0、超出范围,则不起作用
  • n,则针对所有儿子
  • 2n或者even,则针对第偶数个的儿子
  • 2n+1或者odd,则针对第奇数个儿子
  • 针对前5个:-n+5。(不能写成5-n)

:nth-last-child

相比:nth-child,是倒着数的。

:first-of-type

在满足条件的p元素中找第一个:

    <style>p:first-of-type{background-color: aquamarine;}</style></head><body><div><span>John</span><p>Ken</p><p>Elaine</p><p>Jack</p></div>

:last-of-type

同类型中找最后一个

:nth-of-type

同类型中找第n个

:nth-last-of-type

同类型中倒数第n个

:only-child

例如p:only-child,表示选中一个p,这个p必须是其父元素的唯一儿子。也就是没有兄弟的p元素。

:only-of-type

例如:p:only-of-type,表示没有同类型的兄弟p元素。

:root

选择html根元素,也就是html元素。

:empty

选中没有内容的div元素(空格也不能有):

    <style>div:empty{height: 100px;width: 100px;background-color: red;}</style></head><body><div></div></body>

否定伪类

:not

选择div中的p,但是排除类名为k的p

    <style>div p:not(.k){color: red;}</style></head><body><div><p>A</p><p>A</p><p class="k">A</p><p class="k">A</p></div>

还可以排除属性:div p:not([title='ttt'])
排除第一个儿子:div p:not(:first-child)

UI伪类

  • :checked
  • :disabled
  • :enabled
    在这里插入图片描述

目标伪类

:target,选中锚点(a标签跳转到本页的锚点)所指向的伪类。

例如,点击某个a元素后,地址栏的#后面内容会变,并且跳转到对应div(这个div就是目标div,可以为其设置样式):

    <style>div{background-color: gray;margin-bottom: 20px;height: 100px;}div:target{background-color: aquamarine;}</style>
</head>
<body><a href="#d1">去看第1个</a><a href="#d2">去看第2个</a><a href="#d3">去看第3个</a><a href="#d4">去看第4个</a><a href="#d5">去看第5个</a><a href="#d6">去看第6个</a><div id="d1">第1个</div><div id="d2">第2个</div><div id="d3">第3个</div><div id="d4">第4个</div><div id="d5">第5个</div><div id="d6">第6个</div>
</body>

在这里插入图片描述

语言伪类

根据指定的语言选择元素(本质是看lang属性的值)。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div:lang(en){color: red;}</style>
</head>
<body><div>hello</div><div lang="en">world</div>
</body>
</html>

在html标签中设置了默认的语言:lang="zh-CN"表示简体中文。所以元素默认带有该语言属性。
单独设置了一个lang为en(英文)的div,为其设置样式。

也可以使用属性选择器实现该效果:

        div[lang="en"]{color: red;}

伪元素选择器

很像元素,但不是元素,是元素中的一些特殊位置。

::first-letter

设置第一个字母的样式:

    <style>div::first-letter{color: red;}</style>
</head>
<body><div>Lorem ipsum dolor sit amet.</div>
</body>

::first-line

第一行

::first-selection

鼠标选中的内容

input::placeholder

设置input提示文字的样式(输入内容的样式不受影响)

    <style>input::placeholder{color: lightblue;}</style>
</head>
<body><input type="text" placeholder="请输入内容"/>
</body>

在这里插入图片描述

::before和::after

    <style>div::before{content: '¥';}div::after{content: '.00';}</style>
</head>
<body><div>199</div><div>299</div><div>399</div><div>499</div>
</body>

在这里插入图片描述

::before和::after中的内容是默认无法用鼠标选中的。
选中的是div最开始的位置、最后的位置,随后创建一个子元素。


css2没有严格区分伪类和伪元素,可以只用一个冒号。
css3区分了两者,要求伪元素使用两个冒号。
大部分伪元素使用一个冒号也可以生效,除了::selection和::placeholer。

选择器优先级

简单描述:!important>行内>ID>类>元素>通配>继承的样式

计算权重,格式:(a,b,c)

a:ID选择器个数
b:伪类、属性选择器个数
c:元素伪元素选择器个数

权重大的优先级高,权重相同看顺序,后来者居上。

相关文章:

CSS选择器

文章目录 基本选择器复合选择器交集选择器并集选择器后代选择器子代选择器兄弟选择器相邻兄弟选择器通用兄弟选择器 属性选择器伪类选择器动态伪类结构伪类:first-child:last-child:nth-child:nth-last-child:first-of-type:last-of-type:nth-of-type:nth-last-of-type:only-ch…...

吐血整理:Air8201如何使用LuatOS进行电源管理功能!

在物联网应用场景中&#xff0c;设备续航能力直接影响其部署成本与运维效率。LuatOS操作系统通过软件层面的精细化控制&#xff0c;为Air8201提供了灵活且高效的电源管理策略。本文将从系统架构、API接口、实战配置三个维度&#xff0c;解析如何利用LuatOS实现Air8201的智能电源…...

C++11QT复习 (四)

Day6-1 输入输出流运算符重载&#xff08;2025.03.25&#xff09; 1. 拷贝构造函数的调用时机 2. 友元2.1 友元函数 3. 输入输出流运算符重载3.1 关键知识点3.2 代码3.3 关键问题3.4 完整代码 4. 下标访问运算符 operator[]4.1 关键知识点4.2 代码 5. 函数调用运算符 operator…...

Allure 报告数据存储结构

Allure 报告数据存储结构 Allure的报告的下有一个data目录&#xff0c;里面存储了全部展示的数据。data目录下面有两种类型的文件一类是csv&#xff0c;一类是json&#xff0c;两个类型的文件中同名的文件数据是一样的&#xff0c;只是不同的展示方法。我们就按照json格式的数据…...

HarmonyOS:基于axios实现文件的下载以及下载进度的监听

#前言&#xff1a;项目开发中&#xff0c;避免不了实现文件下载功能&#xff0c;其他平台的下载都很成熟&#xff0c;网上的例子也比较多&#xff0c;我就自己项目中实现的下载功能做个总结&#xff0c;你可以参考我的写法实现功能。 下载封装基于axios实现的下载功能。 1.下载…...

应用服务接口第二次请求一直pending问题

目录 一、问题背景二、问题排查过程三、解决方案四、总结 一、问题背景 升级内容发布到灰度环境&#xff0c;验证相关服务&#xff0c;查看接口调用日志&#xff0c;发现第一次请求正常&#xff0c;第二次相同接口请求就一直pending&#xff0c;其他服务也是如此 二、问题排查…...

外设的中断控制

如ADC、SPI、I2C、TIM等使用STM32 HAL库时的中断函数调用方式和UART非常类似&#xff0c;都有底层直接使能中断和上层库函数管理两种方式。下面详细说明几种典型外设&#xff1a; 一、ADC外设 &#xff08;1&#xff09;直接使能中断&#xff08;底层控制&#xff09;&#xf…...

云资源开发学习应用场景指南,场景 1 云上编程实践平台

云资源开发学习应用场景指南 云资源开发学习应用场景指南&#xff0c;场景 2&#xff1a;云桌面实验室 云资源开发学习应用场景指南&#xff0c;场景 3&#xff1a;云资源支持的项目实践 场景 1&#xff1a;云上编程实践平台 《如何在云平台上搭建你的第一个编程实践环境》…...

C++中使用CopyFromRecordset将记录集拷贝到excel中时,如果记录集为0个,函数崩溃,是什么原因

文章目录 原因分析解决方案1. 检查记录集是否为空2. 安全调用COM方法3.进行异常捕获4. 替代方案&#xff1a;手动处理空数据 总结 在C中使用CopyFromRecordset将空记录集&#xff08;0条记录&#xff09;复制到Excel时崩溃的原因及解决方法如下&#xff1a; 原因分析 空记录集…...

第四届能源、电力与电气国际学术会议(ICEPET 2025)

重要信息 地点&#xff1a;中国-成都 官网&#xff1a;www.icepet.net&#xff08;了解参会投稿等信息&#xff09; 时间&#xff1a;2025年4月25-27日 简介 第四届能源、电力与电气会&#xff08;ICEPET 2025定于2025年4月25-27日在中国成都举办。 本次将围绕能源、电力及…...

【IDEA的个性化配置】

目录&#xff1a; 一&#xff1a;隐藏项目路径二&#xff1a;禁用斜体注释三&#xff1a;重新Maven构建未完待续... 一&#xff1a;隐藏项目路径 &#x1f60a;在IDEA左侧的Project目录中&#xff0c;项目名称后面显示了项目的文件路径地址&#xff0c;如果不喜欢可以隐藏&…...

分享最近前端面试遇到的一些问题

前情提要&#xff08;分享个人情况&#xff0c;可以直接跳过&#xff09; 先说一下我的个人情况&#xff0c;我是2026届的&#xff0c;目前是在找前端实习。 3月初&#xff0c;从3月3日开始在Boss上投简历。 分享我的个人故事&#xff0c;不想看可以直接滑到下面&#xff0c;…...

SSH免密登录服务器方法

Window免密连接Linux系统 生成公匙 ssh-keygen -t rsa一路回车生成公钥 复制公匙&#xff0c;使用记事本打开复制全部内容 notepad C:\Users\DELL\.ssh\id_rsa.pub内容如"ssh-rsa AAAAB3NzaC1yc2EAAAA…" 远程登录服务器将内容写入~/.ssh/authorized_keys echo …...

3.26前端模拟面试

包含 Vue 3、TypeScript、性能优化、工程化等方面&#xff0c;偏八股文。 基础知识 Vue 3 响应式原理&#xff1a;Vue 3 如何实现响应式系统&#xff1f;Proxy 和 Reflect 的作用是什么&#xff1f; TypeScript 类型体操&#xff1a;实现一个 TypeScript 类型 DeepPartial&am…...

23种设计模式-备忘录(Memento)设计模式

备忘录设计模式 &#x1f6a9;什么是备忘录设计模式&#xff1f;&#x1f6a9;备忘录设计模式的特点&#x1f6a9;备忘录设计模式的结构&#x1f6a9;备忘录设计模式的优缺点&#x1f6a9;备忘录设计模式的Java实现&#x1f6a9;代码总结&#x1f6a9;总结 &#x1f6a9;什么是…...

六十天Linux从0到项目搭建(第八天)(缓冲区、gitee提交)

一 缓冲区&#xff0c;C中有很多字符a. 可显字符 b.控制字符 在 C 语言 中&#xff0c;字符可以分为 可显字符&#xff08;Printable Characters&#xff09; 和 控制字符&#xff08;Control Characters&#xff09;&#xff0c;它们通常存储在 缓冲区&#xff08;Buffer&…...

QOpenGLWidget视频画面上绘制矩形框

一、QPainter绘制 在QOpenGLWidget中可以绘制,并且和OpenGL的内容叠在一起。paintGL里面绘制完视频后,解锁资源,再用QPainter绘制矩形框。这种方式灵活性最好。 void VideoGLWidget::paintGL() {glClear(GL_COLOR_BUFFER_BIT);m_program.bind();//绘制视频数据// 解绑VAOg…...

vue3 ts 封装axios,配置axios前置拦截器,让所有axios请求携带token

vue3 ts 封装axios,配置axios前置拦截器&#xff0c;让所有axios请求携带token http.tsapp.tsvue文件 http.ts import axios from axios // 引入axios import router from /router import Qs from qs import { ElMessage } from element-plusconst { prefixBasePath } requir…...

前端使用WPS WebOffice 做在线文档预览与编辑

先附上官网 WebOffice SDK 1、在下面这个地方找到jdk&#xff0c;然后下载 按照 2、只需要把jdk下载下来&#xff0c;放到项目中&#xff0c;然后引入到项目中就可以了&#xff0c;在wps 官网创建个应用&#xff0c;然后把appId放到代码中就可以了&#xff0c;等待后端把回调…...

在 CentOS 系统中开机自动执行 Shell 脚本

在 CentOS 系统中&#xff0c;可以通过以下方法设置开机自动执行 Shell 脚本。推荐使用 systemd 服务&#xff08;现代 Linux 系统的标准方式&#xff09;&#xff0c;也可以使用传统的 /etc/rc.local 方法。 方法 1&#xff1a;使用 Systemd 服务&#xff08;推荐&#xff09;…...

kotlin知识体系(四) : inline、noinline、crossinline 关键字对应编译后的代码是怎样的 ?

1. inline、noinline、crossinline 的作用 在 Kotlin 里&#xff0c;inline、noinline 和 crossinline 这几个关键字和高阶函数紧密相关&#xff0c;它们能够对高阶函数的行为进行优化和控制。本文接下来会详细介绍它们的作用和原理。 1.1 inline 关键字 inline 关键字用于修…...

Python电影市场特征:AR模型时间序列趋势预测、热图可视化评分影响分析IMDb数据|附数据代码

原文链接&#xff1a;https://tecdat.cn/?p41214 分析师&#xff1a;Zhiheng Lin 在数字时代&#xff0c;电影产业的数据分析已成为洞察市场趋势与用户偏好的重要工具。本专题合集聚焦印度电影市场&#xff0c;通过IMDb数据集&#xff08;IMDb Movies Dataset&#xff09;的深…...

【后端】【Django DRF】从零实现RBAC 权限管理系统

Django DRF 实现 RBAC 权限管理系统 在 Web 应用中&#xff0c;权限管理 是一个核心功能&#xff0c;尤其是在多用户系统中&#xff0c;需要精细化控制不同用户的访问权限。本文介绍如何使用 Django DRF 设计并实现 RBAC&#xff08;基于角色的访问控制&#xff09;系统&…...

使用docker部署springboot、Vue分离项目,部署到主路径

这几天写了一个小的应用&#xff0c;牵涉到了使用docker部署问题&#xff0c;中间遇到了一些小问题&#xff0c;此处记录下&#xff0c;为以后遇到类似的问题提供一些解决思路。 1、准备使用的镜像&#xff1a;mysql、redis、nginx、jdk。 镜像地址&#xff1a; docker pull s…...

大疆上云api直播功能如何实现

概述 流媒体服务器作为直播画面的中转站,它接收推流端的相机画面,同时拉流端找它获取相机的画面。整个流程如下: 在流媒体服务器上创建流媒体应用(app),一个流媒体服务器上面可以创建多个流媒体应用约定推拉流的地址。假设流媒体服务器工作在1935端口上面,假设创建的流…...

服务器数据恢复—Raid5热备盘同步中断的数据恢复案例

服务器数据恢复环境&#xff1a; 某公司一台存储上有一组由15块硬盘组建的raid5阵列。raid5阵列上层是一个xfs裸分区&#xff0c;起始位置是0扇区。 服务器故障&#xff1a; raid5阵列中有一块硬盘出现故障掉线&#xff0c;热备盘自动上线同步数据&#xff0c;数据同步还没有完…...

FFmpeg开发学习:AVFormatContext结构体

1.AvFormatContext结构体 是ffmpeg中用于处理多媒体文件的核心结构体之一&#xff0c;属于libavformat模块&#xff0c;主要负责描述一个多媒体文件或流的封装格式&#xff0c;用来打开&#xff0c;读取&#xff0c;写入&#xff0c;操作媒体文件&#xff08;如.MP4 .mkv .flv…...

Ceph集群2025(Squid版)导出高可用NFS集群(上集)

#创建一个CephFS 文件系统 ceph fs volume create cephfs02#创建子卷 ceph fs subvolumegroup create cephfs02 myfsg2#查看子卷 ceph fs subvolumegroup ls cephfs02[{"name": "myfsg2"} ]创建 NFS Ganesha 集群 #例子 $ ceph nfs cluster create <c…...

Python----计算机视觉处理(Opencv:图像边缘检测:非极大值抑制,双阈值筛选)

一、 高斯滤波 边缘检测本身属于锐化操作&#xff0c;对噪点比较敏感&#xff0c;所以需要进行平滑处理。这里使用的是一个5*5的高斯 核对图像进行消除噪声。 二、计算图像的梯度和方向 三、非极大值抑制 在得到每个边缘的方向之后&#xff0c;其实把它们连起来边缘检测就算完了…...

超微服务器主板重置ipmi登录密码

超微服务器主板重置ipmi登录密码 超微服务器的ipmi登录密码不对&#xff0c;需要重置但是bios内并没有找到可以设置的选项。 以下是解决办法&#xff1a; 安装IPMITOOL apt install ipmitool -y执行以下命令加载模块&#xff1a; modprobe ipmi_watchdog modprobe ipmi_po…...

【react18】react项目使用mock模拟后台接口

前后端分离项目&#xff0c;后端还没有接口的时候&#xff0c;前端可以使用mockjs的技术实行假数据的模拟。这里使用的是mock的库msw实现这个业务. MSW msw是mock的工具&#xff0c;官网地址是在这里 使用步骤 1.安装msw npm install mswlatest --save-dev2.新建存放mock接…...

阿里云国际站代理商:如何通过Serverless调用GPU资源?

1.采用支持GPU资源的Serverless系统 选择支持GPU资源的Serverless系统&#xff0c;如Dilu系统&#xff0c;它通过内省弹性&#xff08;introspectiveelasticity&#xff09;机制&#xff0c;提供细粒度和自适应的二维协同扩展机制&#xff0c;支持GPU资源按需分配。 2.系统…...

CI/CD(三) 安装nfs并指定k8s默认storageClass

一、NFS 服务端安装&#xff08;主节点 10.60.0.20&#xff09; 1. 安装 NFS 服务端 sudo apt update sudo apt install -y nfs-kernel-server 2. 创建共享目录并配置权限 sudo mkdir -p /data/k8s sudo chown nobody:nogroup /data/k8s # 允许匿名访问 sudo chmod 777 /dat…...

Ae 效果详解:音频波形

Ae菜单&#xff1a;效果/生成/音频波形 Generate/Audio Waveform 音频波形 Audio Waveform效果可以可视化音频信号&#xff0c;能以多种方式显示音频波形&#xff0c;包括沿开放或闭合的蒙版路径显示。 本效果适用于所有色深模式&#xff08;8-bpc、16-bpc、32-bpc&#xff09;…...

S7-1200对V90 PN进行位置控制的三种方法

S7-1200系列PLC通过PROFINET与V90 PN伺服驱动器搭配进行位置控制,实现的方法主要有以下三种: ? 方法一、在PLC中组态位置轴工艺对象,V90使用标准报文3,通过MC_Power、MC_MoveAbsolute等PLC Open标准程序块进行控制, 这种控制方式属于中央控制方式(位置控制在PLC中计算,驱…...

定制表单排序,react, sort

概要 在实际开发中&#xff0c;我们常常碰到&#xff0c;一个页面根据条件不同&#xff0c;其展示的表单项需要动态改变位置&#xff1b;但是又不想写重复代码&#xff1b;可以试一下以下方法&#xff1b; 效果 使用的技术 HtmlReact,useMemoES6的扩展运算 代码 import Re…...

Vue3中keep-alive缓存组件应用场景。

文章目录 一、KeepAlive是什么&#xff1f;二、基本使用1.例子2.keep-alive使用 三、其他属性3.1 包含/排除3.2 最大缓存实例数3.3 缓存实例的生命周期 总结 一、KeepAlive是什么&#xff1f; 是一个内置组件&#xff0c;它的功能是在多个组件间动态切换时缓存被移除的组件实例…...

测试用例`

1.什么是测试用例 测试⽤例&#xff08;Test Case&#xff09;是为了实施测试⽽向被测试的系统提供的⼀组集合&#xff0c;这组集合包含&#xff1a;测试环境、操作步骤、测试数据、预期结果等要素. 2.测试用例的万能公式(重点) 设计测试⽤例的万能公式&#xff1a; 功能测试界…...

React 中的错误边界(Error Boundaries),如何使用它们捕获组件错误

大白话React 中的错误边界&#xff08;Error Boundaries&#xff09;&#xff0c;如何使用它们捕获组件错误 在 React 里&#xff0c;错误边界就像是一个“小卫士”&#xff0c;专门负责在组件出现错误时挺身而出&#xff0c;避免整个应用因为一个小错误就崩溃掉。接下来我会详…...

往期项目shader着色器实践效果应用合集

1、管路混色 2、水管水流效果 3、水管流入到流完效果 4、加热冷却 两 色混色 示意 XX、毒蘑菇测试效果...

go-zero: sqlx 对timestamp 格式数据问题

1.问题背景 对于goctl自动生成的model代码文件&#xff0c;对于非null的时间数据列&#xff0c;一定会产生如下问题 deleted_at\": unsupported Scan, storing driver.Value type \u003cnil\u003e into type *time.Time" 例如以上的问题&#xff0c;不论是插入还…...

systemd-networkd 的 *.network 配置文件详解 笔记250323

systemd-networkd 的 *.network 配置文件详解 笔记250323 查看官方文档可以用 man systemd.network命令, 或访问: https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html 名称 systemd.network — 网络配置 概要 network.network 描述 一个纯…...

Axure项目实战:智慧城市APP(四)医疗信息(动态面板、选中交互应用)

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;智慧城市APP医疗信息模块 主要内容&#xff1a;医疗信息模块原型设计与交互 应用场景&#xff1a;医疗信息行业 案例展示&#xff1a; 案例视频&…...

机器学习正则化技术:Ridge、Lasso与ElasticNet全解析

机器学习中的正则化技术 在机器学习中&#xff0c;正则化技术&#xff08;如 Ridge 和 Lasso&#xff09;主要用于解决过拟合问题&#xff0c;通过限制模型复杂度提高泛化能力。以下是详细说明及实例代码&#xff1a; 一、正则化解决的问题 过拟合&#xff1a;模型在训练集表…...

【汽车传感系统架构:借助传感获取安全】

为了将车辆自动化提升到一个新的水平&#xff0c;设计人员研究了 LiDAR 等传感器选项的权衡&#xff0c;并着眼于传感系统架构。 本文引用地址&#xff1a;https://www.eepw.com.cn/article/202503/468584.htm 每年&#xff0c;约有 120 万人死于道路交通事故&#xff0c;还有…...

3.25-2request库

request库 一、介绍request库 &#xff08;1&#xff09;requests是用python语言编写的简单易用的http库&#xff0c;用来做接口测试的库&#xff1b; &#xff08;2&#xff09;接口测试自动化库有哪些&#xff1f; requests、urllib 、urllib2、urllib3、 httplib 等&…...

LangChain4j(1):初识LangChain4j

1 什么是LangChain和LangChain4j LangChain是一个大模型的开发框架&#xff0c;使用LangChain框架&#xff0c;程序员可以更好的利用大模型的能力&#xff0c;大大提高编程效率。如果你是一个lava程序员&#xff0c;那么对LangChain最简单直观的理解就是&#xff0c;LangChain…...

UMI-OCR Docker 部署

额外补充 Docker 0.前置条件 部署前&#xff0c;请检查主机的CPU是否具有AVX指令集 lscpu | grep avx 输出如下即可继续部署 Flags: ... avx ... avx2 ... 1.下载dockerfile wget https://raw.githubusercontent.com/hiroi-sora/Umi-OCR_runtime_linux/main/Do…...

python每日十题(9)

外存储器的容量一般都比较大&#xff0c;而且大部分可以移动&#xff0c;便于在不同计算机之间进行信息交流。外存储器中数据被读入内存储器后&#xff0c;才能被CPU读取&#xff0c;CPU不能直接访问外存储器。本题答案为A选项。 进程是指一个具有一定独立功能的程序关于某个数…...

Jenkins最新版,配置Gitee私人令牌和Gitee凭证

jenkins 配置Gitee私人令牌和凭证 jenkins 版本&#xff1a;Jenkins 2.492.2 Gitee配置 Jenkins配置gitee插件&#xff0c;需要先申请gitee私钥。 安装gitee插件 申请Gitee私人令牌&#xff0c;后面还需要添加凭证。 测试链接&#xff0c;并保存 配置凭证...