使用 CSS 属性选择器 [attr^="value"] 可匹配属性值严格以指定字符串开头的元素，区分大小写；添加 i 标志可忽略大小写，如 [lang^="en" i]。
![css匹配以某属性值开头的元素怎么写_通过[attr^=value]选择器实现](https://img.php.cn/upload/article/000/969/633/176654508249430.jpeg)
要匹配属性值以某个字符串开头的元素，使用 CSS 的属性选择器 [attr^="value"] 即可。
基本语法和含义
其中 ^= 是“开始于”操作符，表示该属性的值必须**严格以指定字符串开头**（区分大小写），中间或结尾是否还有其他内容不影响匹配。
-
a[href^="https://"]匹配所有 href 以 https:// 开头的链接 -
img[src^="/assets/"]匹配 src 以 /assets/ 开头的图片 -
[data-role^="nav"]匹配 data-role 值为 nav、navigation、nav-item 等的任意元素
注意大小写敏感性
默认情况下，CSS 属性值匹配是**区分大小写的**。比如：
-
[lang^="en"]能匹配lang="en-US"，但不匹配lang="EN-us" - 如需忽略大小写，可在属性名后加
i标志：[lang^="en" i]—— 这是 CSS3 新增特性，现代浏览器均支持
常见误用提醒
这个选择器只看**属性是否存在且值是否以指定字符串开头**，不校验完整值，也不做子串搜索：
立即学习“前端免费学习笔记（深入）”；
- ✅
[class^="btn"]匹配class="btn-primary"、class="btn" - ❌ 不匹配
class="primary-btn"（因为不是以 "btn" 开头） - ❌ 不匹配
class="btn btn-lg"（class 是空格分隔的列表，整个值是"btn btn-lg"，确实以 "btn" 开头，所以 ✅ 实际上是匹配的；但若想匹配含某个类名，应优先用.btn类选择器，而非依赖属性开头匹配）
与其它属性选择器对比
便于区分使用场景：
-
[attr^="val"]：开头匹配（本文重点） -
[attr$="val"]：结尾匹配，如[src$=".png"] -
[attr*="val"]：包含匹配，如[alt*="logo"] -
[attr~="val"]：空格分隔的单词匹配（用于 class、rel 等），如[class~="active"]
