CSS选择/过渡属性值似乎是错误的

Question

我之前使用了#footer a选择器，但在删除#footer后，使更改适用于页面上的所有<a> 's，除了具有.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>

破碎，新代码

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代替。但是，如果嵌套级别是任意的，并且您想要排除a嵌套在.navbar中的任何地方，那么您可能会在编写CSS选择器时遇到麻烦。像:not(.navbar) a这样的元素总是能够匹配树中更高的元素。

最简单的解决方案是将效果应用于所有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预览