CSS选择背景图像设置为特定网址的元素[重复]答案

【问题标题】：CSS select elements with background-image set to specific url [duplicate]CSS选择背景图像设置为特定网址的元素[重复]
【发布时间】：2018-01-18 19:18:26
【问题描述】：

如果background-color 属性具有提供给它的特定网址（即默认图像 - 从我无法控制的 HTML 复制：style='background-image: url("assets/images/default_logo.png");'），我有想要隐藏的元素

有没有办法用 CSS 查询这种特定情况？

具体例子：

<div class="module-logo"
     ng-show="!show_loading &amp;&amp; module_logo != ''"
     style="background-image: url(&quot;assets/images/default_logo.png&quot;);"
     aria-hidden="false">
</div>

【问题讨论】：

你看过css attribute selectors吗？
@jeffaudio 是的，但这是不久前的事了，开箱即用的精确匹配无法正常工作。但这确实会有所帮助。

标签： jquery html css jquery-selectors

【解决方案1】：

我在这篇帖子 CSS selector by inline style attribute 中发现我可以像这样创建选择器

div[style*="default_logo.png"]

基本上是这样选择的：

document.querySelector('div[style*="default_logo.png"]')

N.B. 请注意，在这篇文章中强调了这一点，这对于所有更改都非常脆弱和敏感。多余的空间会破坏它。

【讨论】：

您应该投票以关闭您自己的问题作为重复问题，而不是发布链接到该问题的自我回答。

【解决方案2】：

是的，您可以使用以下命令选择该 div：

div[style^="background-image: url"]

这可能需要您使用 CSS 转义字符，这可能会变得混乱，因此您可以交替使用两组选择器来检查子字符串，这些子字符串正是您要查找的内容。在这里可以使用的示例：

div[style*="background-image: url("][style*="default_logo.png"]

【讨论】：

这将如何匹配确切的 url？您的代码仅匹配其值以background-image: url 为前缀（前面）的代码，并且任何地方都没有特定的网址。
您可以简单地添加确切的 URL，它会更具体地匹配，尽管您必须使用转义字符来避免使用 & 和 ;在选择器中