CSS属性选择器如何选特定值？

CSS属性选择器提供了一套强大而灵活的语法，无需依赖类名或ID即可精准定位具有特定属性值的HTML元素：通过[attr="value"]实现完全匹配，再辅以~=、|=、^=、$=、*=等运算符，轻松应对单词包含、语言前缀、开头结尾、子串查找等多样化场景，广泛应用于文件类型图标、数据驱动样式、多语言支持等实战需求，让样式控制更语义化、更高效。

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学习网公众号！