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

CSS attr() 函数详解

news 来源：原创 2025/7/20 10:19:17

attr() 是 CSS 中的一个函数，用于获取 HTML 元素的属性值并在样式中使用。虽然功能强大，但它的应用有一些限制和注意事项。

基本语法

element::pseudo-element {property: attr(attribute-name);
}

可用场景

1. 在伪元素的 `content` 属性中使用（最常用）

<div data-tooltip="这是提示文本">悬停查看提示</div>

div::after {content: attr(data-tooltip);display: none;/* 其他样式 */
}div:hover::after {display: block;
}

2. 支持的属性（有限）

目前主流浏览器仅正式支持在 content 属性中使用 attr()，其他属性的支持有限：

/* 这些在大多数浏览器中无效 */
div {background-color: attr(data-bg-color);width: attr(data-width px);
}

类型转换和单位

attr() 可以结合类型关键字使用：

/* 语法（但浏览器支持有限） */
attr(attribute-name <type-or-unit>? , <fallback>?)

div {width: attr(data-width px, 100px); /* 如果data-width不存在，回退到100px */
}

实际应用示例

工具提示(Tooltip)

<button data-tooltip="点击提交表单">提交</button>

button::after {content: attr(data-tooltip);position: absolute;/* 其他定位和样式 */
}

自定义列表标记

<ul><li data-icon="✓">项目一</li><li data-icon="★">项目二</li>
</ul>

li::before {content: attr(data-icon);margin-right: 8px;
}

浏览器兼容性

所有现代浏览器都支持在 content 属性中使用 attr()
其他属性中的使用仍处于实验阶段（CSS3规范中定义但未广泛实现）
类型转换和回退值支持有限

注意事项

不能用于所有属性：目前只有 content 属性得到广泛支持
动态更新：当HTML属性值改变时，CSS会自动更新
性能：过度使用可能影响渲染性能
可访问性：屏幕阅读器可能无法读取通过 attr() 生成的内容

未来可能性

CSS Values and Units Level 5 规范计划扩展 attr() 的功能，可能包括：

支持更多属性
更好的类型转换
更灵活的回退机制

目前如需更灵活的属性驱动样式，建议使用CSS变量或JavaScript。

CSS attr() 函数详解

attr() 是 CSS 中的一个函数，用于获取 HTML 元素的属性值并在样式中使用。虽然功能强大，但它的应用有一些限制和注意事项。基本语法 element::pseudo-element {property: attr(attribute-name); } 可用场景 1. 在伪元素的 content 属性中使用&#…...

编程日记 2025/7/20 10:19:17

人生如戏、戏如人生

今早，6：30起床给一家人弄早餐，然后听到了老公的一声大喊：”半小时了，你干什么了“，原来孩子说她在理书包，被老公骂了。最近几天，老公脾气变得很差，孩子每天都会被老公骂…...

编程日记 2025/7/1 22:18:51

Java迭代器知识点详解

在 Java 编程中，迭代器（Iterator）是一种用于遍历集合（如 List、Set、Map 等）元素的接口。它提供了一种统一的方式来访问集合中的元素，而无需暴露集合的内部结构。以下是关于 Java 迭代器的详细知识点&#…...

编程日记 2025/7/1 22:18:49

免费开放试乘体验！苏州金龙自动驾驶巴士即将上线阳澄数谷

近日，苏州自动驾驶巴士线路——阳澄数谷示范线正式上线，即日起向全民免费开放试乘体验！ 在苏州工业园区地铁3号线倪浜•阳澄数谷站外，一辆辆黑、白配色的小巴正在道路上有条不紊地行驶。与普通公交不同的是，小巴造型奇…...

编程日记 2025/7/1 22:18:46

Kotlin 协程

第一个协程程序协程是可暂停计算的一个实例。它在概念上类似于线程，因为它需要运行一个代码块，该代码块与其他代码并发运行。然而，协程并不绑定到任何特定的线程。它可以在一个线程中暂停执行，并在另一个线程中恢复执行。协程…...

编程日记 2025/7/19 9:00:49

MySQL函数触发：函数处理与触发器自动化应用

引言各位数据库爱好者们好！今天我们要探索MySQL中两个强大的自动化工具——函数和触发器 🚀。函数就像数据库中的"瑞士军刀"，能帮你高效处理各种数据；而触发器则是数据库的"自动感应器"，能在数据…...

编程日记 2025/7/1 23:42:54

数据可视化热图工具：Python实现CSV/XLS导入与EXE打包

在数据分析工作中，热图(Heatmap)是一种非常直观的可视化工具，能够清晰展示数据矩阵中的数值分布和相关性。本文将介绍如何使用Python构建一个支持CSV/XLS文件导入、热图生成并可打包为EXE的桌面应用程序。核心功能设计我们的热图工具将包含以下核心功能：支持CSV和Excel…...

编程日记 2025/7/1 23:42:53

CUDA Stream的进阶用法：流水线并行的资源竞争解决方案

点击 “AladdinEdu，同学们用得起的【H卡】算力平台”，H卡级别算力，按量计费，灵活弹性，顶级配置，学生专属优惠。引言：多任务推理场景的挑战 GPU在AI推理服务器的典型负载特征（并行模…...

编程日记 2025/7/1 23:42:51

Eclipse Java 开发调优：如何让 Eclipse 运行更快？

Eclipse Java 开发调优：如何让 Eclipse 运行更快？ 在 Java 开发领域，Eclipse 是一款被广泛使用的集成开发环境（IDE）。然而，随着项目的日益庞大和复杂，Eclipse 的运行速度可能会逐渐变慢&#x…...

编程日记 2025/7/1 23:42:49

大模型（1）——基本概念

文章目录一、大模型的定义与概念二、大模型的原理与技术核心三、大模型的应用领域四、市面上常用的大模型1. 生成类模型（文本/代码/图像）2. 理解类模型（文本/语义）3. 多模态模型4. 国产大模型五、总结与趋势一、大模型的定义与…...

编程日记 2025/7/4 17:32:56

MYSQL故障排查和环境优化

一、MySQL故障排查 1. 单实例常见故障 （1）连接失败类问题 ERROR 2002 (HY000): Cant connect to MySQL server 原因：MySQL未启动或端口被防火墙拦截。解决：启动MySQL服务（systemctl start mysqld）或开放…...

编程日记 2025/7/19 3:06:09

sts下载安装

windows下STS（Spring Tools Suite，自带spring插件的eclipse）的下载与安装_sts下载-CSDN博客Spring Boot安装与配置教程_spring boot安装配置-CSDN博客...

编程日记 2025/7/1 23:42:44

Baklib知识中台架构设计与智能服务实践

知识中台架构四库体系解析现代企业知识管理系统的核心在于构建结构化知识资产池，Baklib通过独创的四库体系——知识库、流程库、案例库、模型库——实现知识资源的全生命周期管理。其中，知识库作为基础层，聚合文档、图谱等显性知识&#xf…...

编程日记 2025/7/1 23:42:42

TinyEngine 2.5版本正式发布：多选交互优化升级，页面预览支持热更新，性能持续跃升！

前言 TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过cli创建个人工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码…...

编程日记 2025/7/1 23:42:40

嵌入式系统：技术演进、应用领域发展趋势全面解析

嵌入式系统：技术演进、应用领域及发展趋势全面解析一、引言在当今数字化时代，嵌入式系统已悄然融入到我们生活的方方面面，从日常使用的智能手机、智能家电，到汽车中的各种控制系统，乃至工业生产中的自动化设备、航…...

编程日记 2025/7/1 23:42:38

软件工程-项目管理

进度管理又叫时间管理，确定进度目标，在与质量、成本目标协调的基础上，实现工期目标具体包括以下过程： 活动定义：确定完成各项交付成果需要展开的具体活动活动排序：活动之间的先后关系和逻辑关系活动资…...

编程日记 2025/7/1 23:42:37

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 13.几何着色器（二）爆炸效果修改图元类型

1. 爆炸效果这是几何着色器中的一个常见应用，我们使用几何着色器来模拟爆炸效果。我们希望将每个三角形沿其表面法向量向外移动，则实际上是将组成环面的三角形向外“爆炸”。我们只需取三个顶点的法向量，然后将其相加并求平均&#xff…...

编程日记 2025/7/1 23:42:35

需求频繁变更？AI 驱动的自动化解决方案实践

在软件开发的实际场景中，需求频繁变更已成为困扰开发团队的常见难题。每一次需求变动，都意味着代码的重新编写、调试与测试，不仅消耗大量时间和人力成本，还可能引发一系列连锁反应，影响项目进度与质量。而飞算 JavaAI …...

编程日记 2025/7/1 23:42:33

ffmpeg转码后的视频有横条纹和彩虹横条等乱彩问题

原因：ffmpeg安装的时，./configure 添加了–disable-asm参数，导致色彩异常。 **解决方法：**移除该参数–disable-asm。注意：不加该参数可能提示no yasm或nasm等问题，解决该问题即可。大多是环境变量没有配置…...

编程日记 2025/7/1 23:42:31

QT6 源（111）：阅读与注释菜单栏 QMenuBar，进行属性与成员函数测试，信号与槽函数测试，并给出源码

（1） （2） （3） （4） （5） （6） （7）以下源代码来自于头文件 qmenubar . h ： #ifndef QMENUBAR_H #defi…...

编程日记 2025/7/1 23:42:29

达梦数据库对json字段进行操作

在达梦数据库中，字段类型不能显式定义为JSON，通常以VARCHAR或TEXT类型存储JSON字符串，可以通过内置的JSON函数对JSON格式数据进行操作和条件过滤。 1. 创建表并插入JSON数据假设字段类型为VARCHAR，存储JSON字符串： -…...

编程日记 2025/7/1 23:42:28

基于vue框架的东莞市二手相机交易管理系统5yz0u（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

系统程序文件列表项目功能：用户,相机分类,二手相机开题报告内容基于FlaskVue框架的东莞市二手相机交易管理系统开题报告一、研究背景与意义 1.1 研究背景随着数字技术的迅猛发展和摄影文化的广泛普及，相机已成为人们记录生活、表达创意的重要工…...

编程日记 2025/7/1 23:42:26

谷歌 NotebookLM 即将推出 Sparks 视频概览：Gemini 与 Deep Research 加持，可生成 1 - 3 分钟 AI 视频

近期，谷歌旗下的 NotebookLM 即将推出一项令人瞩目的新功能 ——Sparks 视频概览。这一功能借助 Gemini 与 Deep Research 的强大能力，能够生成 1 - 3 分钟的 AI 视频，为用户带来全新的内容创作与信息获取体验。 NotebookLM：AI 笔…...

编程日记 2025/7/1 23:42:24

MCP详解

前言：AI能力跃迁的“最后一公里” 当前，大语言模型（LLMs）已展现出文本生成、逻辑推理等通用能力，但其与真实世界的交互仍存在瓶颈。传统模式下，开发者需为每个外部工具（如数据库、API、文件系统）编写定制化接口，导致开发周期长、兼容性差、安全风险高。而模型上下…...

编程日记 2025/7/15 5:57:05

信息学奥赛一本通 1539：简单题 | 洛谷 P5057 [CQOI2006] 简单题

【题目链接】 ybt 1539：简单题洛谷 P5057 [CQOI2006] 简单题【题目考点】 1. 树状数组模板题及讲解：洛谷 P3374 【模板】树状数组【解题思路】解法1：树状数组该有01构成数组初值都为0。某位置的元素被修改奇数次后值为1&#x…...

编程日记 2025/7/1 23:42:21

设计模式-面试题

摘要： 1、通俗易懂，适合小白 2、仅做面试复习用，部分来源网络，博文免费，知识无价，侵权请联系！ 1. 什么是设计模式？ 设计模式是在软件开发过程中，针对反复出现的问题所…...

编程日记 2025/7/1 23:42:19

upload-labs靶场通关详解：第11关

一、分析源代码 $is_upload false; $msg null; if (isset($_POST[submit])) {if (file_exists(UPLOAD_PATH)) {$deny_ext array("php","php5","php4","php3","php2","html","htm","phtml"…...

编程日记 2025/7/1 23:42:17

excel：时间戳格式与日期格式的互转

13位时间戳转日期时间（毫秒） 假设A2单元格内容为13位的时间戳，再选中B2单元格，在公式框中输入 TEXT((A2/10008*3600)/8640070*36519,"yyyy/mm/dd hh:mm:ss.000")接下来，选中B2单元格，下拉应用公…...

编程日记 2025/7/1 23:42:16

嵌套式向量中断控制器(NVIC)

1.概述 2. NVIC 的中断处理机制 3. NVIC 中断管理机制 1.概述中断控制器是ARMv7-M 异常模型的核心组成部分。该中断控制器的运行遵循 ARM 通用中断控制器（GIC）规范，该规范也适用于其他 ARMv7 架构配置和其他处理器架构。 ARMv7-M 的 NVIC（嵌套向量中断控制器）架构支持最…...

编程日记 2025/7/1 23:42:13

Custom color A few examples showing how to custom barplot color. Horizontal barchart It makes sense to make your barchart horizontal: group labels are now much easier to read 文章目录 Custom colorHorizontal barchart 探索Barplot的奥秘Barplot基础什么是Barp…...

编程日记 2025/7/1 23:42:12

MongoDB的管道聚合

管道聚合可以实现很多数据处理和统计功能，并且随着不断的更新，其功能也越来越丰富。代表着NoSQL数据库的一种发展趋势。管道聚合通过aggregate语句实现，支持多种匹配、处理、输出方式。其语法是： db.<collection>.aggr…...

编程日记 2025/7/1 23:42:10

基于 STM32 的自动温度巡检小车控制系统设计与实现

一、引言在工业监控、仓储管理及环境监测等场景中，自动温度巡检系统具有重要应用价值。本文设计一种基于 STM32 单片机的自动温度巡检小车，通过集成温度采集、路径规划及数据处理功能，实现对目标区域的实时温度监测与异常报警，为智能化环境监控提供低成本解决方案。二、…...

编程日记 2025/7/1 23:42:08

怎么利用JS根据坐标判断构成单个多边形是否合法

怎么利用JS根据坐标判断构成单个多边形是否合法引言在GIS（地理信息系统）、游戏开发、计算机图形学等领域，判断一组坐标点能否构成合法的简单多边形（Simple Polygon）是一个常见需求。合法多边形需要满足几何学上的基本规则，本文将详细介绍如何使用JavaScript实现这一判…...

编程日记 2025/7/1 23:42:05

20. 自动化测试框架开发之Excel配置文件的IO开发

20.自动化测试框架开发之Excel配置文件的IO开发一、核心架构解析 1.1 类继承体系 class File: # 文件基类# 基础文件验证和路径管理class ExcelReader(File): # Excel读取器# 实现Excel数据解析逻辑1.2 版本依赖说明 # 必须安装1.2.0版本（支持xlsx格式&#…...

编程日记 2025/7/1 23:42:04

高校快递物流管理系统设计与实现（SpringBoot+MySQL）

💗博主介绍💗：✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示：文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

编程日记 2025/7/1 23:42:02

python-leetcode 67.寻找两个正序数组中的中位数

题目： 给定两个大小分别为m和n的正序（从小到大）数组nums1和nums2。请找出并返回这两个正序数组的中位数。通过双指针和二分查找的思想，找到两个有序数组的中位数。 1.初始化和基本情况处理首先获取两个个数组的长度m和n,计算…...

编程日记 2025/7/1 23:42:00

Python 实现图片浏览和选择工具

实现将截图预览，并按照顺序加入一个pdf文件中，实现照片管理尤其对于喜欢看教程截图做笔记的网友们。 C:\pythoncode\new\python-image-pdf-processor.py 界面展示 🧱 一、核心结构概述主类 ImageViewer(wx.Frame) 是主窗口类，…...

编程日记 2025/7/19 23:04:21

V4L2应用程序开发-01数据采集流程

1 数据采集流程可以参考这些文件： mjpg-streamer\mjpg-streamer-experimental\plugins\input_control\input_uvc.c video2lcd\video\v4l2.c Video for Linux two(Video4Linux2)简称V4L2，是V4L的改进版。V4L2支持三种方式来采集图像：内存…...

编程日记 2025/7/12 7:06:46

TDengine 2025年产品路线图

TDengine OSS 之 2025 年年度路线图如下表所示。季度功能2025Q1 虚拟表查询能力：REGEXP、GREATEST、LEAST、CAST 函数支持判断表达式、单行选择函数的其他列值、INTERP 支持插值时间范围存储能力：支持将查询结果写入超级表、超级表支持 KEEP 参数、STM…...

编程日记 2025/7/1 23:41:54

Unreal 从入门到精通之SceneCaptureComponent2D实现UI层3D物体360°预览

文章目录前言SceneCaptureComponent2D实现步骤新建渲染目标新建材质UI控件激活3DPreview鼠标拖动旋转模型最后前言我们在（电商展示/角色预览/装备查看）等应用场景中，经常会看到这种3D展示的页面。即使用相机捕获一个3D的模型的视图，然后把这个视图显示在一个UI画布上，…...

编程日记 2025/7/12 17:40:38

windows服务器部署jenkins工具

sjenkins作为一款构建发布工具，极大的简化了大家项目部署发布流程。jenkins通常是部署在linux服务上，今天给大家分享的是windows服务器上如何搭建jenkins发布工具。 1.首先第一步还是看windows安装docker 这篇文章哈，当然也可以不采用docker…...

编程日记 2025/7/1 23:41:51

Java—— File详解

说明 File对象就表示一个路径，可以是文件的路径、也可以是文件夹的路径这个路径可以是存在的，也允许是不存在的获取File对象方法名称说明public File(String pathname)根据文件路径创建文件对象public File(String parent,String child)根据父路径名…...

编程日记 2025/7/1 23:41:49

「NameCraft · 幻想命名器」开发记：我和 CodeBuddy 的一次奇幻共创之旅

起心动念：我想做一个不一样的名字生成器最近我有一个脑洞：能不能做一个风格化强烈的名字生成器？不要那种平平无奇的「小明、小红」类型，而是支持「幻想风」「武侠感」「赛博感」的那种，最好还有高颜值的 UI&#xff…...

编程日记 2025/7/1 23:41:48

03 接口自动化-精通Postman之接口鉴权，接口Mock，接口加解密以及接口签名Sign

文章目录一、接口鉴权（鉴定是否有访问接口的权限）1、cookie，session，token鉴权。2、Postman的鉴权方式二、接口Mock Sersver三、接口的加解密四、接口签名sign（接口鉴权的一种）1.什么是接口签名&#xff…...

编程日记 2025/7/17 17:55:43

深入浅出IIC协议 -- 第二篇：FPGA数字接口设计方法论

第二篇：FPGA数字接口设计方法论副标题 ：从状态机到跨时钟域——打造工业级I2C控制器的设计密码 1. 状态机设计黄金法则 1.1 状态机类型抉择 Mealy与Moore对比实验 ： 类型输出依赖时序特性I2C适用场景Moore仅当前状态延迟稳定协议主状态控…...

编程日记 2025/7/18 16:23:36

20250519使用TF卡将NanoPi NEO core开发板刷机为Ubuntu core22.04.3系统完成之后执行poweroff自动关机

1、h3-sd-friendlycore-xenial-4.14-armhf-20210618.img.gz 在WIN10下使用7-ZIP解压缩/ubuntu20.04下使用tar 2、Win32DiskImager.exe 写如32GB的TF卡。【以管理员身份运行】 3、TF卡如果已经做过会有3个磁盘分区，可以使用SD Card Formatter/SDCardFormatterv5_WinE…...

编程日记 2025/7/1 23:41:42