css 属性选择器写法有哪些_表单样式精确匹配技巧

属性选择器语法分四类：存在匹配[attr]、精确值匹配[attr=”value”]、部分值匹配[attr^=”p”]/[attr$=”s”]/[attr*=”sub”]、多条件组合及伪类协同，需注意大小写敏感、空格影响与浏览器兼容性。

属性存在与否的最简匹配

只关心某个属性是否存在，不验证值内容时，用 [attr] 语法。比如给所有带 required 属性的表单控件加红色边框：

[required] {   border: 2px solid #e53e3e; }

注意：这个写法对 和 都生效——只要属性名存在，不管值是什么。

精确值匹配与常见陷阱

用 [attr="value"] 匹配完全相等的字符串。表单中常用于区分按钮类型或输入类型：

• [type="submit"] 只匹配 ，不匹配 （末尾空格也算差异）
• [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="tuc-19bc10f7-e51833-0 field-error tuc-19bc10f7-e51833-0" 或 class="tuc-19bc10f7-e51833-0 error-message tuc-19bc10f7-e51833-0"

注意：^= 和 $= 对大小写敏感；若需忽略大小写，可在属性后加 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 属性选择器就会静默失效。