HTML属性选择器使用方法详解

CSS属性选择器是通过方括号语法（如[type="submit"]、[data-loading="true"]）精准定位HTML元素的高效方式，支持精确匹配、开头/结尾/包含等多种模式，优先级等同class，搭配data-属性最安全可靠——它不依赖class或id，却能在无法修改HTML结构时实现灵活样式控制，是前端开发中兼顾兼容性、语义性与实用性的关键技巧。

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" 结尾的元素（常用于