CSS的src前缀属性选择器匹配img标签不生效是什么原因？

核心原因 #

• 浏览器自动解析相对路径为绝对路径：你使用的^=是开头匹配规则，只会匹配属性值的起始字符串。你在HTML里写的src是相对路径../html/img/xxx.jpg，但浏览器渲染时会自动把相对路径补全为完整的绝对URL（比如https://你的站点域名/实际路径/img/xxx.jpg），此时属性值的开头已经不是你写的../html/img/，自然匹配失败，这是这类问题最常见的诱因。
• CSS优先级被覆盖：如果存在更高优先级的样式规则（比如带!important的img样式、id选择器定义的border规则），你的属性选择器规则会被覆盖，表现为不生效。可以打开浏览器F12开发者工具，选中对应img元素，在样式面板查看你的规则是否存在、是否被划掉。
• CSS加载或语法错误：检查CSS文件是否正常加载（无404报错），你编写的规则是否存在语法问题（比如引号不配对、大括号遗漏、规则被注释包裹），或者HTML和CSS的关联配置错误。

解决方案 #

• 改用包含匹配的属性选择器，规避相对路径转绝对路径的问题：

img[src*="/img/"]{
    border: 10px solid black;
}

*=规则可以匹配属性值中包含指定字符串的元素，只要你的图片路径里存在/img/片段就能命中，兼容性和稳定性更好。

• 更稳妥的方案是给需要加样式的img标签添加统一类名，用类选择器匹配，不受路径变化影响：

<img class="custom-img" src="../html/img/image1.jpg">
<img class="custom-img" src="../html/img/image2.jpg">

.custom-img {
    border: 10px solid black;
}

• 若排查是优先级问题，可适当提高当前规则的优先级，比如在属性值后加!important（不推荐滥用，优先调整选择器权重）。

内容的提问来源于stack exchange，提问作者Yunn