如何在CSS属性选择器中转义&符号以筛选data URI背景图？

场景说明 #

需要筛选出.card-img类中，背景图为Data URI的元素，区分于背景图是网络URL的元素：

• Data URI背景图元素示例：

<div style="background-image: url(&quot;data:image/svg+xml;base64,PD94b…9zdmc+&quot;);">

• 网络URL背景图元素示例：

<div style="background-image: url(&quot;https://my.example.com.png&quot;);">

无效的尝试 #

原本编写了转义特殊字符的选择器，但无法生效，问题出在&符号的转义处理上：

.card-img[style*='background-image\: url\(\&quot\;data\:image'] {
    display: none;
}

注：HTML由CMS生成无法修改，必须仅通过CSS实现解决方案

正确解决方案 #

浏览器解析HTML时，"会被转换成实际的双引号"，所以不需要在CSS选择器中处理HTML实体的转义，直接匹配解析后的字符即可。

写法一（双引号包裹属性值，内部转义双引号） #

.card-img[style*="background-image: url(\"data:image"] {
    display: none;
}

写法二（单引号包裹属性值，内部直接用双引号） #

.card-img[style*='background-image: url("data:image'] {
    display: none;
}

两种写法都能精准匹配到背景图为Data URI的元素，因为它们直接对应了浏览器解析后的style属性内容。

测试代码 #

CSS代码 #

span {
  background: yellow
}

.card-img {
  height: 120px;
  width: calc(100% - 4rem);
  display: block;
  margin: 2rem;
}

/* 使用正确的选择器 */
.card-img[style*='background-image: url("data:image'] {
  display: none;
}

HTML代码 #

<div class="card-img" style="background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/3/3b/Pyramide_von_Athribis.jpg&quot;);">
  <span>Image with Internet URL</span>
</div>

<div class="card-img" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3msSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0HYnydMtUlIqUfywxb60AxZqEXaoifgMCXptR9MtklHpEY2iUHWnSjvvRr70QujkC+pUC/90glMuEnlOjVMt0j70QriLS1LtEnnRj3qUUXfIidOjsxAhcZFo0bjNDH0xxNLr0dIrUdmntVTkMoyfL8jcLBRuErhJyrgKyb4zA/5zg3tYFBBmUTmQTnhMinruBzvvhnxwxZ/st+Ktt5zp9hqota2vtK6y9FemNBblc9HiMiTtMbFtsM6gcPV2r6dwroseLrMrbQrdLGdyKoobKbo3Zh+ynrgVllZulTsXE3rV0pIqUf42UVUo0JyjEHoS0HmsiHRGR/lmRz/1hjqnxjvpRWfwtOhusaz0LRGf7FEfbDVmqHXlJeW0pbXq5bec3fX0nTnzmuJuWvhoFFhm0FtrziBsjaAaDCYWC+uSi6jQS3FsSfLJiTirCOkuCG1KiG+wSC+GBvgyhTszQ64Z77KAAAARXRSTlMAIQRDLyUgCwsE6ebm5ubg2dLR0byXl4FDQzU1NDEuLSUgC+vr6urq6ubb29vb2tra2tG8vLu7u7uXl5eXgYGBgYGBLiUALabIAAABsElEQVQoz12S9VPjQBxHt8VaOA6HE+AOzv1wd7pJk5I2adpCC7RUcHd3d3fXf5PvLkxheD++z+yb7GSRlwD/+Hj/APQCZWxM5M+goF+RMbHK594v+tPoiN1uHxkt+xzt9+R9wnRTZZQpXQ0T5uP1IQxToyOAZiQu5HEpjeA4SWIoksRxNiGC1tRZJ4LNxgHgnU5nJZBDvuDdl8lzQRBsQ+s9PZt7s7Pz8wsL39/DkIfZ4xlB2Gqsq62ta9oxVlVrNZpihFRpGO9fzQw1ms0NDWZz07iGkJmIFH8xxkc3a/WWlubmFkv9AB2SEpDvKxbjidN2faseaNV3zoHXvv7wMODJdkOHAegweAfFPx4G67KluxzottCU9n8CUqXzcIQdXOytAHqXxomvykhEKN9EFutG22p//0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aEfEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC&quot;);">
  <span>Image with Data URL</span>
</div>

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