使用css属性选择器可直接根据元素属性设置样式，无需添加类名或ID。例如，[title]为含title属性的元素添加边框；input[type=”submit”]精确匹配type为submit的按钮并设置背景色；[class~=”btn”]匹配class中包含”btn”的元素实现圆角；a[href*=”example.com”]使链接地址含指定字符的文字变红；a[href^=”https://”]和a[href$=”.pdf”]分别匹配链接开头与结尾，用于标识外部链接或文件类型。这些选择器灵活强大，适合在不修改html时控制样式，减少冗余类名，但复杂选择器可能影响性能。
使用CSS属性选择器可以针对带有特定属性或属性值的html元素设置样式，而不需要额外添加类名或ID。这种方法在需要根据元素的特征进行样式控制时非常实用。
基本属性选择器
选择具有某个属性的元素，不管属性值是什么。
例如，为所有包含 title 属性的元素添加边框：
[title] {
border: 1px solid #ccc;
}
这样，所有带有 title 属性的元素都会应用该样式。
属性值精确匹配
使用等号（=）来匹配属性的精确值。
比如，只为 type=”submit” 的按钮设置背景色：
input[type=”submit”] {
background-color: #4CAF50;
color: white;
}
这个选择器只作用于 type 属性**完全等于** “submit” 的 input 元素。
属性值包含关键词
使用波浪号加方括号（~=）来匹配包含某个词的属性值（以空格分隔的单词）。
立即学习“前端免费学习笔记（深入）”；
例如，为 class 属性中包含 “btn” 的元素设置圆角：
[class~=”btn”] {
border-radius: 4px;
}
适用于 class=”btn primary” 或 class=”secondary btn” 等情况。
属性值包含子字符串
使用星号（*=）匹配属性值中包含某段字符的元素。
常用于匹配链接中的关键词：
a[href*=”example.com”] {
color: red;
}
所有链接地址中包含 “example.com” 的锚点文字将变为红色。
属性值前缀或后缀匹配
使用插入符号（^=）匹配属性值开头，使用美元符号（$=）匹配结尾。
例如，标记外部链接或特定文件类型：
a[href^=”https://”] {
text-decoration: underline;
}
a[href$=”.pdf“]::after {
content: ” (PDF)”;
color: #999;
}
第一个规则作用于以 https:// 开头的链接，第二个为所有PDF链接后面添加标识。
基本上就这些常见用法。属性选择器灵活且强大，特别适合在无法修改HTML结构时做样式控制。合理使用能减少冗余类名，让代码更简洁。不过要注意性能，过于复杂的选择器可能影响渲染速度。