使用[title]选中含title属性的元素；2. input[type="text"]精确匹配type为text的输入框；3. [class~="highlight"]匹配含独立类名highlight的元素；4. a[href*="example"]匹配href含"example"子串的链接；5. ^=、$=、|=分别匹配属性值开头、结尾及连字符分隔的情况，灵活精准定位无需修改HTML。
要选中带有特定属性的元素，可以直接使用CSS属性选择器。这种选择器通过方括号 [] 来匹配具有指定属性的元素，无论属性值是什么，或者匹配属性值为特定内容的元素。
1. 选择带有某个属性的元素
只要元素拥有指定属性，不管属性值是什么，都会被选中。例如，选中所有带有 title 属性的元素：
[title] {
color: blue;
}
上面的样式会作用于所有包含 title 属性的标签，比如 或 。
2. 选择属性值等于特定字符串的元素
使用等号 = 可以精确匹配属性值。例如，选中 type 属性值为 text 的输入框：
立即学习“前端免费学习笔记（深入）”；
input[type="text"] {
border: 1px solid #ccc;
}
这只会选中 ，不会影响 type="password" 或其他类型。
和网手机平台商城(WAP2.0)
下载
和网商城，手机平台(WAP2.0界面)v1.0测试版（带全站测试数据+图片）。 特色功能： 商品基本信息中编号条型码生成设计中，选择商品类型。 商品价格，支持单一价格，同时支持开启规格，可以分别设置价格。 商品属性，支持自定属性，不同的商品类型加载不同的商品属性，支持按属性检索浏览。 扩展属性：支持添加文字属性，图文属性等，具体功能请试用 赠送礼品：添加购买赠送的礼品（礼品后台管理）。 相关专题
3. 匹配属性值包含特定单词（以空格分隔）
使用 ~ 可以匹配属性值中包含某个单词的元素。常用于 class 属性，因为类名是以空格分隔的。
[class~="highlight"] {
background: yellow;
}
这会选中 class="demo highlight" 或 class="highlight important" 等含有独立单词 highlight 的元素。
4. 匹配属性值包含子串
使用 *= 可以匹配属性值中包含某段字符的元素。例如，选中所有 href 中包含 "example" 的链接：
a[href*="example"] {
color: green;
}
这个规则会命中 http://www.example.com、https://sub.example.org 等。
5. 其他常用属性匹配方式
-
^=：匹配属性值以指定字符串开头的元素。
例：a[href^="https"]选中所有 HTTPS 链接。 -
$=：匹配属性值以指定字符串结尾的元素。
例：img[src$=".png"]选中所有 PNG 图片。 -
|=：匹配属性值等于指定值或以该值加连字符开头的元素。
例：[lang|="en"]可匹配 lang="en" 或 lang="en-US"。
基本上就这些常见用法。属性选择器灵活且强大，特别适合在不修改HTML结构的情况下精准定位元素。关键是根据实际属性和值的特点选择合适的匹配符号。不复杂但容易忽略细节，比如引号和符号的准确性。写的时候注意别漏了等号或写错符号。基本上就这些。
