css属性选择器通过[属性=”值”]语法精确匹配元素，如input[type="submit"]；还可使用~=、|=、^=、$=、*=实现包含、前缀、后缀、子串等匹配方式，用于文件类型图标、数据属性等场景。
CSS属性选择器可以根据元素的属性及其值来选中特定元素。要匹配特定值，可以使用等号 = 进行精确匹配。
基本语法：匹配精确属性值
使用方括号 [] 包裹属性和值，并用等号连接：
-
[attr="value"]：选中属性attr的值完全等于 “value” 的元素
例如，只想选中 type="submit" 的按钮：
input[type="submit"] { background: blue; }
其他常用匹配方式
除了完全匹配，还可以根据需求使用以下形式：
-
[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，能更灵活地针对具体属性值进行样式控制。
基本上就这些，关键是根据匹配精度选择合适的符号。