Css ：not（）功能不正常

我有一个导航栏，由一个

ul

和一些

li

和

a

元素组成，如下所示：

/*字体*/
@导入url(https://fonts.googleapis.com/css?family=Libre+巴斯克维尔）；
/*标题*/
.标题包装{
背景色：#6969；
高度：53px；
宽度：100%；
排名：0；
保证金：0；
填充：0；}
.标题导航{
背景色：深蓝色；
排名：0；
高度：48px；
保证金：0；
填充：0；
列表样式类型：无；}
.标题导航元素{
浮动：左；}
.标题导航元素徽标{
高度：48px；}
.标题导航元素链接{
显示：块；
文字装饰：无；
颜色：白色；
填充：14px 16px；
字体系列：“自由巴斯克维尔”，衬线；
转换持续时间：0.3s}
.主动{
背景色：#696969；}
.标题导航元素链接：悬停：未（.active）{
背景色：#808080；}

这是因为您的

：not（.active）

应用于

a

，但

active

类位于其父类

li

你可以这样做来修复它-

。标题导航元素：未（.active）：悬停。标题导航元素链接

---

或者通过将

active

类移动到带有class

header nav element链接的元素中来修改HTML，这是因为
：not（.active）
正在应用于
a
，但是
active
类位于其父类
li

你可以这样做来修复它-

。标题导航元素：未（.active）：悬停。标题导航元素链接

或者通过将
活动
类移动到具有class
标题导航元素链接的元素
来修改HTML，如下所示：

此选择器仅适用于一个元素；不能使用它排除所有祖先

.header-nav-element
是
.header-nav-element-link
的祖先

更改：

.header-nav-element-link:hover:not(.active) {
    background-color: #808080;}

致：

更正的代码片段：


.header导航{
背景色：深蓝色；
排名：0；
高度：48px；
保证金：0；
填充：0；
列表样式类型：无；
}
.标题导航元素{
浮动：左；
}
.标题导航元素徽标{
高度：48px；
}
.标题导航元素链接{
显示：块；
文字装饰：无；
颜色：白色；
填充：14px 16px；
字体系列：“自由巴斯克维尔”，衬线；
过渡时间：0.3s
}
.主动{
背景色：#6969；
}
.标题导航元素：悬停：未（.active）{
背景色：#808080；
}






根据：

此选择器仅适用于一个元素；不能使用它排除所有祖先

.header-nav-element
是
.header-nav-element-link
的祖先

更改：

.header-nav-element-link:hover:not(.active) {
    background-color: #808080;}

致：

更正的代码片段：


.header导航{
背景色：深蓝色；
排名：0；
高度：48px；
保证金：0；
填充：0；
列表样式类型：无；
}
.标题导航元素{
浮动：左；
}
.标题导航元素徽标{
高度：48px；
}
.标题导航元素链接{
显示：块；
文字装饰：无；
颜色：白色；
填充：14px 16px；
字体系列：“自由巴斯克维尔”，衬线；
过渡时间：0.3s
}
.主动{
背景色：#6969；
}
.标题导航元素：悬停：未（.active）{
背景色：#808080；
}






修复了它。谢谢你，善良的女士！太棒了！：）很高兴帮你把它修好。谢谢你，善良的女士！太棒了！：）很乐意帮忙