CSS :not() 所有后代的选择器

Question

如何使 :not()-selector 在以下示例中起作用？

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

Answer 1

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

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

上面的代码将选择任何没有.mystyle类的下 2 层的后代，然后将其所有后代a标签着色为绿色。

下面是一个工作示例：

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

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