如何使用CSS选择所有以"data:"开头的src属性？

你之前的代码没生效，是因为用了精确匹配的[src="data:"]——这个选择器只会挑src完全等于data:的元素，但你的目标元素src是data:后面还带一串内容的，所以得换属性前缀匹配的写法。

修正后的CSS代码 #

img {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

/* 匹配src属性以"data:"开头的img元素 */
img[src^="data:"] {
   border: 5px solid red;
}

对应HTML（无需修改） #

<img src="data:kjowejsdflwrwfjhwerorlowejlfsj" alt="Example">

<img src="img.png" alt="Example">

简单解释 #

• [src^="data:"] 是CSS的属性前缀选择器，专门用来匹配属性值以指定字符串开头的元素，完美适配你要找的带data: URI的图片。
• 之前的[src="data:"]是精确匹配，只有当src的值和data:完全一样时才会触发，所以对带后续内容的data: URI不起作用。

内容的提问来源于stack exchange，提问作者MD Hasan Patwary