使用 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"]
以上就是css匹配以某属性值开头的元素怎么写_通过[attr^=value]选择器实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
948
收藏
