html - CSS Selection/Transition 属性值似乎有误

Question

我使用了 #footer a选择器之前，但删除之后 #footer使更改适用于所有 <a>在页面上，除了类为 .navbar 的 div 中的那些, 没有链接分配以下选择器:a:not(.navbar a) , a:not(.navbar a):hover , a:not(.navbar a):active (也可以在 Google Chrome 元素检查器中看到)

我创建了 2 个片段来表示我想说的内容:

1. 第一个版本的工作示例

a {
  text-decoration: none !important;
  color: #3D64FF
}

#footer a {
  text-shadow: none;
  padding: 0;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

#footer a:hover {
  text-shadow: 0px 0px 5px #3D64FF;
  padding: 0 5px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

#footer a:active {
  text-shadow: 0px 0px 7px #3556DB;
  padding: 0 2px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

<div id="footer">
  <a href="#">Footer link #1</a><br>
  <a href="#">Footer link #2</a><br>
  <a href="#">Footer link #3</a><br>
  <a href="#">Footer link #4</a>
</div>

1. 损坏的新代码

a {
  text-decoration: none !important;
  color: #3D64FF
}

a:not(.navbar a) {
  text-shadow: none;
  padding: 0;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

a:not(.navbar a):hover {
  text-shadow: 0px 0px 5px #3D64FF;
  padding: 0 5px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

a:not(.navbar a):active {
  text-shadow: 0px 0px 7px #3556DB;
  padding: 0 2px;
  transition: text-shadow 0.1s linear, padding 0.1s linear;
}

<div calss="navbar"><a href="#">NAVBAR link</a></div>
<a href="#">Not NAVBAR link</a>

我必须再次修复它，所以它适用于整个页面，除了那个 div。

Answer 1

您不能在 CSS 中执行 a:not(.navbar a)。

如果您知道您的 a 将始终直接嵌套在 .navbar 中并且您想排除该 a，您可以选择 :not(.navbar) > a 代替。但是，如果嵌套级别是任意的，并且您想排除嵌套在 .navbar 中任何位置的 a，那么您可能无法为此编写 CSS 选择器。像 :not(.navbar) a 这样的东西总是可以匹配树中更高层的其他元素。参见 this answer另一个为什么它不起作用的例子。

对此最简单的解决方案是将效果应用于所有 a 元素，然后在 .navbar a 中撤消它们:

.navbar a {
  text-shadow:none;
  padding:0;
  -webkit-transition-property: none;
  -moz-transition-property: none;
  -o-transition-property: none;
  transition-property: none;
}

jsFiddle preview