基础语法与类型
下面是几种常见的属性选择器及其应用示例：
1. 存在属性选择器 `[attr]`
该选择器会选中所有包含指定属性的元素，无论这个属性的值是什么。
css
/* 选中所有带有title属性的元素 */
[title] {
border: 1px solid red;
}
2. 精确值选择器 `[attr="value"]`
此选择器用于选中属性值严格等于指定值的元素。
css
/* 选中所有type属性为text的input元素 */
input[type="text"] {
width: 200px;
}
3. 包含值选择器 `[attr~="value"]`
当元素的属性值是由空格分隔的多个值组成的列表，并且其中包含指定的值时，会被该选择器选中。
css
/* 选中所有class属性中包含"highlight"的元素 */
[class~="highlight"] {
background-color: yellow;
}
4. 前缀匹配选择器 `[attr^="value"]`
该选择器会选中属性值以指定字符串开头的元素。
css
/* 选中所有href属性以"https"开头的a元素 */
a[href^="https"] {
color: green;
}
5. 后缀匹配选择器 `[attr$="value"]`
它会选中属性值以指定字符串结尾的元素。
css
/* 选中所有src属性以".jpg"结尾的img元素 */
img[src$=".jpg"] {
border: 2px solid #ccc;
}
6. 包含子串选择器 `[attr*="value"]`
只要元素的属性值中包含指定的子字符串，就会被该选择器选中。
css
/* 选中所有data-role属性中包含"admin"的元素 */
[data-role*="admin"] {
font-weight: bold;
}
7. 语言选择器 `[attr|="value"]`
此选择器用于选中属性值等于指定值，或者以指定值后跟连字符（-）开头的元素，通常用于匹配语言代码。
css
/* 选中所有lang属性为"en"或者以"en-"开头的元素 */
[lang|="en"] {
font-style: italic;
}
不区分大小写的匹配
在属性选择器的右方括号前添加`i`（仅适用于CSS3），可以实现不区分大小写的匹配。
css
/* 不区分大小写地匹配所有type属性为"submit"的input元素 */
input[type="submit" i] {
background-color: #4CAF50;
}
组合使用属性选择器
你可以将多个属性选择器组合起来使用，从而更精确地定位元素。
css
/* 选中所有同时具有name和data-id属性的input元素 */
input[name][data-id] {
margin-bottom: 10px;
}
/* 选中所有type为"email"且name以"user_"开头的input元素 */
input[type="email"][name^="user_"] {
border-color: blue;
}
实际应用案例
下面是一些属性选择器在实际开发中的常见用法：
1. 表单样式优化
css
/* 选中所有必填字段 */
[required] {
border-left: 3px solid red;
}
/* 选中所有禁用的输入框 */
[disabled] {
background-color: #f5f5f5;
cursor: not-allowed;
}
2. 自定义图标
css
/* 为外部链接添加外部图标 */
a[href^="http"]::after {
content: ' \2197'; /* 右上箭头符号 */
}
3. 响应式图片处理
css
/* 针对高分辨率屏幕优化图片 */
img[data-srcset] {
image-rendering: high-quality;
}
4. 状态管理
css
/* 选中所有aria-expanded属性为true的元素 */
[aria-expanded="true"] {
background-color: #e0e0e0;
}
属性选择器在现代前端开发中是非常强大的工具，它能够帮助你减少HTML中的冗余类，让CSS选择器更加简洁且具有语义化。不过要注意，过度使用复杂的属性选择器可能会对性能产生一定影响，所以在实际应用中要权衡使用。