属性选择器需全等匹配,特殊字符须原样写出并加引号;外链用[href^="http"],pdf链接优先[href$=".pdf"];无引号仅限合法标识符,ie8需强制加引号;多属性顺序无关,但布尔属性不可写为disabled="false"。

用 [href] 选择器匹配链接但没生效?检查协议和转义
直接写 a[href] 确实能选中所有带 href 的 a,但常见失效原因是:链接值含特殊字符(比如 ?、&、/)或协议前缀不一致。CSS 属性选择器对字符串是**全等匹配**,不是模糊查找。
例如:a[href="https://example.com"] 不会匹配 href="//example.com" 或 href="/path?x=1" —— 后者里 ? 在 CSS 中无需 URL 编码,但必须原样写出;若属性值含空格或引号,必须用双引号包裹选择器。
- 想匹配所有外链?用
a[href^="http"](注意^=表示“开头为”) - 想排除站内相对路径?
a[href]:not([href^="/"]):not([href^="#"]):not([href^="mailto:"]) - Chrome DevTools 里右键「Copy selector」生成的
[href="..."]常含 URL 编码(如%20),粘贴进 CSS 前要手动还原成空格
[type="submit"] 和 [type=submit] 有区别吗?有,且影响兼容性
没引号的 [type=submit] 在绝大多数现代浏览器里能工作,但 CSS 规范要求属性值为**标识符**时才可省略引号;而 submit 是合法标识符,button 也是,reset 也是——但 email、search、datetime-local 就不是(含连字符或关键词)。一旦写成 [type=datetime-local],不加引号会解析失败。
- 安全写法永远加双引号:
[type="submit"]、[type="email"]、[type="datetime-local"] - IE8 及更早版本不支持无引号写法,哪怕值是
submit;项目需兼容 IE8 就必须统一加引号 -
type属性在input上区分大小写,[type="Submit"]不会匹配type="submit"
用 [href*="pdf"] 下载链接样式却误伤了页面内锚点?
*= 是“包含子串”,看似方便,但容易过度匹配。比如 href="/assets/report.pdf" 和 href="#section-pdf-guidelines" 都会被 [href*="pdf"] 捕获——后者根本不是链接目标,只是个 ID 锚点。
立即学习“前端免费学习笔记(深入)”;
- 优先用
$=(结尾匹配):a[href$=".pdf"]、a[href$=".zip"] - 如果后缀带查询参数(如
/file.pdf?ver=2),$=失效,改用|=(以单词开头并紧跟短横或结尾)不适用,此时只能上 JS 或接受少量误匹配 - 注意:URL 路径大小写敏感,
[href$=".PDF"]不会匹配小写后缀,服务器返回的 Content-Type 才决定是否下载,CSS 只管样式
多个属性组合时顺序重要吗?不重要,但逻辑易错
button[type="submit"][disabled] 和 button[disabled][type="submit"] 完全等价,CSS 选择器不关心属性书写顺序。真正容易出错的是布尔属性和值属性的混用逻辑。
-
[disabled]是存在即真,不写值也成立;[disabled="disabled"]也成立,但多此一举 - 想同时满足“是 submit 按钮”且“未被禁用”?得用
button[type="submit"]:not([disabled]),不能写成[type="submit"][disabled="false"]—— HTML 里disabled="false"仍是禁用状态 - 属性选择器优先级和类名相同( specificity = 0,1,0),叠加两个就是 0,2,0,比单个类高,但低于 ID;别为了“精准”叠一堆属性导致维护困难
^=、$=、*=、|=)的边界条件、引号规则、大小写敏感点,全在真实 HTML 结构和浏览器解析细节里藏着。








