CSS属性选择器使用详解

CSS属性选择器是一组强大而灵活的样式匹配工具，无需依赖类名或ID，即可通过元素的属性及其值精准定位目标——从精确匹配（如`input[type="text"]`）到模糊匹配（如`a[href*="example.com"]`）、前缀（`^=`）、后缀（`$=`）、单词包含（`~=`）和语言子码（`|=`）等多种方式，广泛应用于文件图标定制、外部链接标识、数据驱动样式等实际场景，让CSS选择逻辑更语义化、更可控。

CSS属性选择器可以根据元素的属性及其值来选中特定元素。要匹配特定值，可以使用等号 = 进行精确匹配。

基本语法：匹配精确属性值

• [attr="value"]：选中属性 attr 的值完全等于 "value" 的元素

例如，只想选中 type="submit" 的按钮：

其他常用匹配方式

• [attr~="value"]：属性值中包含独立单词 "value"（适用于空格分隔的类名等）
• [attr|="value"]：属性值以 "value" 开头，且后跟连字符或结束（常用于语言属性，如 lang="zh-CN"）
• [attr^="value"]：属性值以 "value" 开头
• [attr$="value"]：属性值以 "value" 结尾
• [attr*="value"]：属性值中包含字符串 "value"（任意位置）

实际应用场景

• a[href$=".pdf"] { background: url(pdf-icon.png); }
• a[href*="youtube.com"] { background: url(yt-icon.png); }
• button[data-action="delete"] { color: red; }

这些选择器不依赖类名或ID，能更灵活地针对具体属性值进行样式控制。

以上就是《CSS属性选择器使用详解》的详细内容，更多关于的资料请关注golang学习网公众号！