Css 选择器不适用，不适用于锚点答案

【问题标题】：Css selector not, not working for anchorsCss 选择器不适用，不适用于锚点
【发布时间】：2018-02-21 16:43:01
【问题描述】：

我无法理解原因，但在 chrome 中检查，似乎使用 :not 选择器不适用于标签。有人知道原因吗？

这是一个示例代码笔： https://codepen.io/anon/pen/PQezVB

:not(a){
   color:blue;
}

【问题讨论】：

查看codepen，它不起作用
原因已覆盖here，这些本质上是相同的，但我很犹豫将其标记为重复，因为它不涉及后代组合器。

标签： css css-selectors

【解决方案1】：

:not(selector) 选择器匹配不是指定元素/选择器的每个元素。 :not() CSS 伪类表示不匹配选择器列表的元素。由于它阻止特定项目被选中，因此被称为否定伪类。

所以要使用它，您应该指定元素的 css，然后使用 not 用于那些不使用的元素

*:not(a){
   color:blue;
}
* {
  color:black;
}

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<i>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</i>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
<a>This is the link "a tag"</a>

【讨论】：

为什么需要* 规则？将事物染成蓝色的规则根本不应该影响链接。
错误如果你删除 * 链接会是蓝色的，因为里面的文字 @HubertGrzeskowiak

【解决方案2】：

找到了解决办法，应该这样使用：

p {
    color: initial;
}

:not(p) {
    color: green;
}

https://codepen.io/anon/pen/XZqKwd

【讨论】：

【解决方案3】：

在这里找到解决方案：Is the CSS :not() selector supposed to work with distant descendants?

基本上通过选择除元素之外的所有元素，您还可以选择其父元素，因此它的颜色也来自继承。

:not(a) { color: red; }

在这种情况下几乎等同于：

* { color: red; } /* includes "body" element etc. */
a { color: inherit; }

【讨论】：

这就是为什么我认为这是重复的，即使它不一定涉及后代组合器。不过，似乎没有什么好的方法可以在问题中概括这一点。

【解决方案4】：

在锚标签中添加“href”属性似乎可以解决这个问题。

<p>Hello world</p>
<a href="">Some link</a>

【讨论】：