css属性选择器可精准选中带特定属性的元素。1. [attribute]选有该属性的元素，如[title]{color:blue}；2. [attribute="value"]精确匹配，如input[type="submit"]{background:green}；3. 模糊匹配：^[starts-with]、$[ends-with]、*[contains]，用于链接或文件类型；4. ~匹配独立单词，如[class~="error"]；5. |匹配连字符前缀，如[lang|="zh"]。结合语义化html，减少冗余类名，提升样式维护性。
CSS属性选择器可以根据元素的属性及属性值来选中特定元素，比单纯使用标签或类选择器更灵活。它在处理表单、链接、自定义属性等场景时非常实用。下面通过常见用法和实际例子说明如何按属性值选择元素。
1. 基础属性选择器 [attribute]
选择具有指定属性的元素，不管属性值是什么。
例如：选中所有带有 title 属性的元素
css:
[title] {
color: blue;
}
这段文字会变蓝
2. 等值匹配选择器 [attribute="value"]
精确匹配属性值，必须完全一致。
立即学习“前端免费学习笔记（深入）”；
常用于表单元素或特定类型的链接
示例：选中 type 为 submit 的按钮
input[type="submit"] {
background: green;
color: white;
}
也可用于链接类型判断：
a[href="https://example.com"] {
font-weight: bold;
}
3. 模糊匹配与模式选择器
当属性值有规律但不完全相同时，可用以下方式匹配：
• 开头匹配 [attribute^="value"]选中属性值以指定字符串开头的元素
例如：给所有外部链接添加图标
a[href^="https://"] {
padding-right: 16px;
background: url(external-icon.png) no-repeat right center;
}
常用于文件链接类型识别
例如：标记 PDF 下载链接
a[href$=".pdf"] {
background: url(pdf-icon.png) left center no-repeat;
padding-left: 20px;
}
只要属性值中包含指定字符就选中
例如：高亮包含 "admin" 的用户行
tr[data-role*="admin"] {
background-color: #ffeaea;
}
4. 多值属性匹配（适用于 class、lang）
对于空格分隔的多个值，可用以下选择器：
• 单个词匹配 [attribute~="value"]匹配属性值中包含独立单词的元素
例如：选中 class 包含 "error" 的元素
[class~="error"] {
border: 2px solid red;
}
匹配属性值等于指定值或以该值加连字符开头
常用于语言属性：
p[lang|="zh"] {
font-family: "SimSun", serif;
}
基本上就这些。属性选择器结合 HTML 语义能实现精准控制，减少额外类名，让样式更智能。合理使用能提升维护效率，特别是在动态内容或第三方组件中。不复杂但容易忽略细节，比如引号和匹配方式的选择。
