CSS属性选择器用方括号[]匹配HTML元素属性，如[type="submit"]选type值完全等于"submit"的元素，支持^=、$=、*=等模式，优先级与class相同，data-属性搭配最安全。
HTML 本身没有“属性选择器”这个功能——这是 CSS 的语法，不是 HTML 的。你写在 HTML 标签里的 class、id、data-* 这些是属性，但真正“用属性来选中元素并样式化”的动作，发生在 CSS 里。
怎么写一个基础的属性选择器（比如选 type="submit" 的按钮）
CSS 属性选择器用方括号 [] 包裹属性名或属性表达式，不依赖 class 或 id 就能定位元素。
-
[type]：匹配所有带type属性的元素（不管值是什么） -
[type="submit"]：只匹配type值**完全等于**"submit"的元素（区分大小写） -
[type^="text"]：匹配type值以"text"开头的元素（如text、textarea） -
[type$=".js"]：匹配type值以".js"结尾的元素（常用于<script type="application/javascript">这类） -
[type*="email"]：匹配type值中**包含**"email"的元素（如email、email-verify）
注意：[type="Submit"] 不会匹配 <button type="submit">，因为 CSS 属性值匹配默认区分大小写（除非加 i 标志，如 [type="submit" i]）。
为什么 [href] 有时不生效？常见兼容与书写陷阱
看似简单，但实际用错频率很高：
立即学习“前端免费学习笔记（深入）”；
- HTML 中
href是<a>、<link>、<base>的合法属性，但如果你写在<div href="...">上，虽然浏览器可能不报错，但 CSS 的[href]仍会匹配它——这不是 bug，是规范行为；但语义错误，建议用data-href -
<a href="">和<a href="#">都满足[href]，但你想排除空值？得用[href]:not([href=""]):not([href="#"])，略冗长，不如 JS 判断更稳 - IE8 只支持
[attr]和[attr="value"]，不支持^=、$=、*=等现代语法；如果还要兼容，得降级或补 JS - 属性选择器优先级和 class 一样（10），比标签名高（1），但比 ID（100）低；别指望靠多写几个
[data-foo][data-bar]来压过#header
data- 属性 + 属性选择器是最安全的自定义匹配方式
HTML5 明确允许以 data- 开头的自定义属性，CSS 可直接选中，无兼容风险，语义清晰。
例如：
button[data-loading="true"] { opacity: 0.6; cursor: not-allowed; }对应 HTML：
<button data-loading="true">提交中...</button>
- 值推荐用
"true"/"false"字符串，而不是布尔属性（<button data-loading>），因为[data-loading]会匹配所有含该属性的元素，无法区分状态 - 避免用
data-status="pending"这类动态值做选择器，容易和 JS 状态不同步；更适合用固定枚举，如data-state="idle"/data-state="loading"/data-state="success" - 不要把敏感逻辑（如权限控制）只放在
data-permission="admin"+ CSS 里隐藏——CSS 可被禁用或绕过，这只能做 UI 提示，不能替代后端校验
属性选择器真正好用的地方，不是“炫技”，而是当你没法改 HTML class、又必须按某属性差异化样式时——比如 CMS 输出的富文本里混进来的 <img src="*.webp">，用 img[src$=".webp"] 单独加 fallback 样式，就比挨个加 class 现实得多。但也要小心，过度依赖属性值会让样式层和数据层耦合变紧，改个字符串就崩样式。
