属性选择器通过方括号匹配元素，可依据属性存在或属性值精确/模糊匹配；2. a[title]选所有含title属性的链接；3. input[type="email"]仅选type为email的输入框；4. [class~="highlight"]选class包含highlight单词的元素；5. a[href*="example.com"]选href含该字符串的链接；6. ^=、$=、|=分别匹配值开头、结尾和连字符分隔的语言属性，如a[href$=".pdf"]选PDF链接，[lang|="zh"]选中文语言文本。
在CSS中，可以通过属性选择器来匹配带有特定属性的元素。属性选择器使用方括号 [] 包裹属性名称或表达式，可以根据是否存在某个属性，或属性值的具体内容来进行匹配。
1. 匹配具有某属性的元素
只要元素拥有指定的属性，无论其值是什么，都会被选中。
/* 选择所有包含 title 属性的 a 元素 */
a[title] {
color: purple;
}
有标题的链接
2. 匹配属性值完全相等的元素
使用等号 = 来精确匹配属性值。
立即学习“前端免费学习笔记（深入）”；
/* 选择 type 属性值为 "email" 的 input 元素 */
input[type="email"] {
border: 2px solid #007cba;
}
这条规则只会作用于 type="email" 的输入框，不会影响 type="text" 或其他类型。
3. 匹配属性值包含某个词（以空格分隔）
使用波浪号加等号 ~=\ 可以匹配属性值中包含指定单词的元素（适用于以空格分隔的多个类名等情况）。
/* 选择 class 属性中包含 "highlight" 的元素 */
[class~="highlight"] {
background-color: yellow;
}
例如下面这个元素会被选中：
这段文字会高亮
4. 匹配属性值包含子串
使用星号加等号 *=\ 可以匹配属性值中包含指定字符串的元素，即使只是部分内容。
/* 选择 href 中包含 "example.com" 的 a 元素 */
a[href*="example.com"] {
font-weight: bold;
}
5. 其他常用属性选择器
- ^=\：匹配属性值以指定字符串开头的元素
- $=\：匹配属性值以指定字符串结尾的元素
- |=\：匹配属性值等于指定值，或以该值加连字符开头的元素（常用于语言属性）
例如：
/* 以 .pdf 结尾的链接 */
a[href$=".pdf"] {
color: red;
}
/ lang="zh" 或 lang="zh-CN" /
[lang|="zh"] {
font-family: "PingFang SC", sans-serif;
}
基本上就这些常见的用法。根据实际需要组合使用，可以精准定位目标元素，无需额外添加 class 或 id。
