所有后代的CSS :not() 选择器[重复]答案

【问题标题】：CSS :not() selector on all descendants [duplicate]所有后代的CSS :not() 选择器[重复]
【发布时间】：2017-03-02 05:32:31
【问题描述】：

如何使 :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

Link to jsfiddle

重要

我正在尝试在我的博客上设置外部小部件的样式。我无权访问它的 HTML，因此更改 HTML 不是一种选择。我正在寻找纯 CSS 的解决方案。

【问题讨论】：

您能解释一下您要在这里做什么吗？
有四个链接。所有链接都应为绿色，但有一个例外：class="mystyle" 中的链接。
您的小提琴与您问题中的代码完全不同

标签： html css css-selectors

【解决方案1】：

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

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

上面将选择没有.mystyle类的任何后代2级，然后将其所有后代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>

【讨论】：

【解决方案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>

【讨论】：

好像我要发布的答案； codepen.io/anon/pen/LWGygY?editors=1100
我正在尝试设置外部小部件的样式（我无法访问它的 HTML，因此无法更改 HTML！）。
我的回答不会改变 HTML。你是说mystyle 类并不存在？

【解决方案3】：

这样吗？：

div:not(.mystyle) &gt; p &gt; 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>

【讨论】：

【解决方案4】：

一种方法，您可以在下面的 sn-p 中查看。

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>

【讨论】：