本文介绍如何利用 CSS 属性选择器的 ^= 操作符精准匹配以 "data:" 开头的 src 属性值，从而对内联数据 URI 图片等元素进行样式控制。
本文介绍如何利用 CSS 属性选择器的 `^=` 操作符精准匹配以 `"data:"` 开头的 `src` 属性值，从而对内联数据 URI 图片等元素进行样式控制。
在 Web 开发中，常需对使用 Data URL（如 src="data:image/png;base64,..."）嵌入的图片进行特殊样式处理——例如高亮显示、禁用交互或添加视觉标识。此时，仅靠精确匹配（[src="data:"]）无法生效，因为实际值远长于 "data:"，而 CSS 提供了属性开头匹配选择器 ^= 来优雅解决这一问题。
✅ 正确写法：使用 [attr^="value"] 选择器
该选择器表示“匹配属性值以指定字符串开头的所有元素”。针对本例，应写作：
img[src^="data:"] {
border: 5px solid red;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}
配合基础样式：
img {
width: 100px;
height: 100px;
border: 1px solid green;
object-fit: cover;
}
HTML 示例：
@@##@@ @@##@@ @@##@@
✅ 效果：前两个 <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0ibGlnaHRibHVlIi8+PC9zdmc+" alt="Data URI SVG"> 中第一个（data:image/...）和第三个（data:text/...）均会被选中并应用红边框——只要 src 值以 "data:" 起始即匹配，不区分协议子类型。
⚠️ 注意事项
-
^=是大小写敏感的，src^="Data:"不会匹配"data:..."；若需忽略大小写，CSS 本身不支持，需借助 JavaScript 或服务端预处理。 - 该选择器仅作用于 HTML 属性（如
src,href,data-*），不适用于伪元素内容或动态生成的 DOM 属性。 - 避免误用
=（完全相等）或*=（包含子串）：前者仅匹配字面量"data:"（极罕见），后者可能错误命中src="my-data:image.png"等非目标值。
? 扩展用法
你还可以组合使用其他属性选择器增强精度，例如：
/* 仅匹配 img 且 src 以 data: 开头，同时具有 data-preview 属性 */
img[src^="data:"][data-preview] { opacity: 0.7; }
/* 排除 base64 编码的 data: 图片（需 JS 配合实现更复杂逻辑） */
/* 注：纯 CSS 无法正则匹配，此场景建议用 class 标记或 JS 分类 */
总之，[attr^="value"] 是 CSS 中处理“前缀匹配”需求的标准、高效且语义清晰的方案，掌握它能显著提升样式控制的灵活性与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
