属性选择器语法分四类：存在匹配[attr]、精确值匹配[attr="value"]、部分值匹配[attr^="p"]/[attr$="s"]/[attr*="sub"]、多条件组合及伪类协同，需注意大小写敏感、空格影响与浏览器兼容性。
属性存在与否的最简匹配
只关心某个属性是否存在，不验证值内容时，用 [attr] 语法。比如给所有带 required 属性的表单控件加红色边框：
[required] {
border: 2px solid #e53e3e;
}
注意：这个写法对 <input required> 和 <input required="false"> 都生效——只要属性名存在，不管值是什么。
精确值匹配与常见陷阱
用 [attr="value"] 匹配完全相等的字符串。表单中常用于区分按钮类型或输入类型：
-
[type="submit"]只匹配<button type="submit"></button>，不匹配<button type="submit "></button>（末尾空格也算差异） -
[name="email"]区分大小写，name="Email"不会命中 - 中文引号、全角字符、不可见 Unicode（如零宽空格）会导致匹配失败，建议在 HTML 中统一用英文双引号
部分值匹配：以某字符串开头/结尾/包含
表单字段命名常有规律，比如 data-* 或带前缀的 name，这时用以下三类操作符更灵活：
立即学习“前端免费学习笔记（深入）”；
-
[attr^="prefix"]：匹配以prefix开头的值，如[name^="user_"]可选中name="user_name"和name="user_email" -
[attr$="suffix"]：匹配以suffix结尾，适合处理带扩展名的字段，如[name$="_confirm"] -
[attr*="substring"]：匹配任意位置含子串，例如[class*="error"]能捕获class="field-error"或class="error-message"
注意：^= 和 $= 对大小写敏感；若需忽略大小写，可在属性后加 i 标志，如 [type="submit" i]。
多条件组合与伪类协同使用
纯属性选择器容易过度匹配，配合伪类能精准定位用户交互状态：
-
input[type="text"]:invalid只作用于文本输入框的校验失败态，比单独用[type="text"]更安全 -
select[multiple]:focus确保只在多选下拉框获得焦点时生效 - 多个属性可连写：
input[required][type="email"]:not(:placeholder-shown)表示“必填邮箱且已输入内容”
注意：浏览器对 :not() 内部支持程度不一，老版本 Safari 对复合伪类嵌套支持较弱；:placeholder-shown 在 Firefox 中需加前缀 :-moz-placeholder-shown。
真正难的不是写法本身，而是 HTML 属性是否规范、值是否可控——后端拼接的 name 或 JS 动态设置的 data- 属性若含空格、编码错误或意外换行，CSS 属性选择器就会静默失效。
