如何转义CSS属性选择器中的&号?

bvjveswy  于 2023-02-14  发布在  其他
关注(0)|答案(1)|浏览(134)

我正在尝试构建一个CSS选择器,它可以专门区分具有以数据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;);">

为了只选择数据URL图像,我构建了这个选择器(转义特殊字符):

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

但不幸的是,它不起作用:escaping第一个开括号起作用了,但是我被转义的&号卡住了。
编辑:因为HTML是由CMS呈现的,并且是不可更改的,所以正确的答案必须处理CSS!
一个三个三个一个

unguejic

unguejic1#

如果你可以改变HTML,用引号替换",因为你可以用双引号和单引号来处理这类事情:

span {
  background-color: yellow
}

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

.card-img[style*='background-image\: url\(\'data\:image'] span {
  background-color: cyan;
}
<div class="card-img" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Pyramide_von_Athribis.jpg');">
  <span>Image with Internet URL</span>
</div>

<div class="card-img" style="background-image: url('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');">
  <span>Image with Data URL</span>
</div>

如果无法更改HTML,一种解决方法是将属性选择器拆分为两个:
一个二个一个一个

相关问题