CSS中的:not()选择器对所有后代元素的应用

Question

我该如何使:not()选择器在以下示例中起作用？

HTML

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

CSS

#content a:not(.mystyle) {
  color: green;
}

JSFIDDLE

jsfiddle链接

重要提示

我正在尝试为我的博客样式化一个外部小部件。我无法访问它的HTML，因此更改HTML不是一个选项。我正在寻找一种仅基于CSS的解决方案。

- Sr. Schneider

---

请问您能否解释一下您在这里尝试做什么？ - Soviut

有四个链接。所有链接都应该是绿色的，只有一个例外：class="mystyle"中的链接。 - Sr. Schneider

你的 Fiddle 与你问题中的代码非常不同。 - j08691

Answer 1

在你的例子中，:not()选择器被应用于a元素。这将只选择没有.mystyle类的a标签。

#content > * > *:not(.mystyle) a {
    color: green;
}

上面的代码将选择任何没有 .mystyle 类的后代元素（两级下），然后将它们所有后代中的 a 标签颜色设置为绿色。

以下是一个可行的示例：

#content > div > div:not(.mystyle) a {
  color: green;
}

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

- Soviut

Answer 2

有四个链接。所有链接都应该是绿色的，只有一个例外：class="mystyle"的链接。

那么为什么要使用:not()？只需将颜色赋给现有的类即可。

* { color: green; }

.mystyle * { color: red; }

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

- Michael Benjamin

---

好像这就是我要发布的答案：http://codepen.io/anon/pen/LWGygY?editors=1100 - Bhavik

我正在尝试为外部小部件设置样式（我无法访问它的HTML，因此更改HTML不是一个选项！）。 - Sr. Schneider

我的回答不会改变HTML。你是在说mystyle类实际上不存在吗？ - Michael Benjamin

Answer 3

像这样吗？:

div:not(.mystyle) > p > a { color: green; }

<div id="content">
  <div id="one">
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
  <div id="two">
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green -->
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green -->
</div>
</div>

- Johannes

Answer 4

你可以在下面的代码片段中找到实现此操作的方法。

div:not(.calc) > p {
  color: green;
}

<div id="content">
<div><p>Hi</p></div>
<div ><div class="calc"><p>Hi</p></div></div>
<div><p>Hi</p></div>
</div>

- user2560539