属性选择器通过元素的属性及属性值精准选中元素。1. [title] 选中含title属性的元素，颜色设为蓝色；2. [type=”text”] 精确匹配type为text的输入框，添加边框；3. [class~=”btn”] 匹配class中包含btn单词的元素，设置内边距；4. [href*=”example.com”] 匹配href包含该字符串的链接，文字变绿；5. [src^=”https”] 选中src以https开头的资源，[href$=”.pdf”] 选中链接以.pdf结尾的文件。属性选择器无需额外类名即可控制样式，适用于表单和链接等场景。
在css中，属性选择器可以根据元素的属性及属性值来选中特定元素。它使用方括号 [ ] 语法来实现。
1. 基本属性选择器：选中具有某属性的元素
只要元素拥有指定属性，无论值是什么，都会被选中。
例如，选中所有带有 title 属性的元素：
[title] { color: blue; }
这会影响如 <p title=”说明”>这段文字会变蓝</p> 这样的元素。
立即学习“前端免费学习笔记（深入）”；
2. 属性值完全匹配选择器
使用等号 = 来精确匹配属性值。
[type=”text”] { border: 1px solid #ccc; }
这条规则只会选中 type 属性值完全等于“text”的元素，比如输入框：<input type=”text”>。
3. 属性值包含某个词（以空格分隔）
使用 ~= 可以匹配属性值中包含指定单词的元素，单词之间以空格分隔。
[class~=”btn”] { padding: 10px; }
能选中 class=”submit btn primary” 这类包含 “btn” 的元素。
4. 属性值包含子串
使用 *= 可以匹配属性值中**包含指定字符序列**的元素。
[href*=”example.com”] { color: green; }
所有链接地址包含 “example.com” 的 <a> 标签文字将变为绿色。
5. 其他常用形式
- ^=：属性值以指定字符串开头
例：[src^=”https”] 选中所有以 “https” 开头的资源链接。 - $=：属性值以指定字符串结尾
例：[href$=”.pdf“] 选中所有指向PDF文件的链接。
基本上就这些。属性选择器灵活实用，特别适合处理表单、链接或自定义属性的样式控制，不需要额外加类名也能精准定位。