针对您的特定案例：

Question

我有一条CSS规则，该规则告诉所有链接具有蓝色背景色和白色文本色。但是，如果我有一个带有链接的图像，则规则将使它们从背景颜色开始带有蓝色下划线。我希望这是有道理的。

长话短说，我想告诉一个属性，该属性适用于所有 img元素。这是我现有的CSS代码。

a {
  background-color:#0078D7;
  color:white;
}

我已经尝试添加“：not（img）”，但是它没有任何改变。该代码就在这里。

a:not(img) {
  background-color:#0078D7;
  color:white;
}

感谢您的帮助。

更新：这是我现有HTML的摘要。单击图像后，将按预期使用户转到图像的完整视图。

<a href="../images/infobox.png"><img src="../images/infobox.png" width="300px"></a>

Answer 1

写的时候

a:not([data-attr="img"])

您的意思是链接带有名为img的属性。您可以做的是使用值为img的数据属性或类属性。您的代码将起作用：

HTML5

<a data-attr="img" href="...">

CSS

a:not([data-attr="img"])

祝你好运。

编辑：

我弄错了正确的CSS是

a:not([data-attr="img"])

Answer 2

您要实现的是为a设置样式，当其中包含img标记时，该样式不适用

写作

a:not(img)

毫无意义的是，a元素不能同时是img元素

所以你走对了路，但是使用不好

您必须使用类代替:not选择器

所以我们有：

a:not(.img) {
  background-color:#0078D7;
  color:white;
}

并且在HTML中，只要在class=img标记内有img标记，就只需放置一个a：

<a class="img" href="../images/infobox.png"><img src="../images/infobox.png" width="300px"></a>
<a href="#">Another link</a>

Answer 3

本质上，

CSS不能不能影响目标元素（a）的“父”元素（img）。

因此，CSS不能基于元素是否（或不包含）任何子元素而不能应用于元素，并且如果这些子元素不存在或不存在，则不能计算这些元素。

因此，在锚定CSS定义的眼中，它包含图像的事实无法明确表达。

为此，我们有几种选择：

您需要添加more CSS Specificity（huh?，what?）
或use Javascipt/Jquery
或HTML5 pseudo code。
或否定规则限定符（:not）[MDN]（，上面使用了更多的特异性）

This CSS Tricks Article有点老，但是是CSS特异性的很好的概念介绍。
This link可能也有用。

针对您的特定案例：

David's comment符合要求。

I 如何解决该问题（一般概念）

我将使用:not运算符并根据需要选择某些情况来解决您的问题。

CSS：

a {
  /* Rules for ALL anchors, primarily for anchors that contain images etc. */
  background-color:none;
  color: green;
}

/* Followed by rules ONLY for anchors that do NOT contain the .img class */
/* These will overwrite the above rule on the applicable elements */
a:not(.img){
  background-color:#0078D7;
  color:white;
}

HTML：

<a href="/images/infobox.png" class='img'><img src="/images/infobox.png" width="300px"></a>
<a href='https://www.google.com'>Goooooogle me!</a>

这是一个有效的演示：

    a {
      background-color:none;
      color: green;
    }

    a:not(.img){
      background-color:#0078D7;
      color:white;
      font-size: 1.2rem;
      letter-spacing:0.15;

    }

<div>
    <a href="https://i.pinimg.com/474x/f6/98/d5/f698d58d7201bbdb19d66377f13a3704--german-soldier-german-army.jpg" class='img'><img src="https://i.pinimg.com/474x/f6/98/d5/f698d58d7201bbdb19d66377f13a3704--german-soldier-german-army.jpg" width="300px"></a><br><BR>
    <a href='https://www.bing.com'>Goooooogle me!</a>
</div>

Answer 4

将css类赋予元素后，即可使用样式标签。

<a href="google.com" class="cssClass" style="color=red" />

如何对CSS规则进行例外处理？

4 个答案:

针对您的特定案例：

I 如何解决该问题（一般概念）