如何覆盖继承CSS样式？解决a:hover样式冲突问题

你遇到的问题是CSS选择器优先级导致的：.navbar a:hover的优先级比.button-go-premium:hover高，所以前者的color样式会覆盖后者，导致按钮hover时文字颜色无法变成白色。

核心原因 #

CSS选择器优先级按权重计算：

• .navbar a:hover：类选择器（.navbar）+ 元素选择器（a），权重为 0,1,0,1
• .button-go-premium:hover：仅类选择器，权重为 0,1,0,0
  权重更高的样式会被优先应用，因此前者的color会覆盖后者的设置。

解决方法（无需修改HTML结构） #

提升.button-go-premium:hover的选择器优先级，让它的权重超过.navbar a:hover，有两种常用方式：

方式1：增强选择器特异性

修改按钮的hover样式选择器，结合父类和元素标签，直接拉高权重：

.button-go-premium {
  border: 3px solid var(--primary-color);
  border-radius: 15px;
  margin-top: -3px;
  padding-right: 0px;
}

.navbar a:hover {
  color: var(--primary-color);
}

/* 增强选择器，权重超过.navbar a:hover */
.navbar a.button-go-premium:hover {
  background-color: var(--primary-color);
  color: white;
}

方式2：使用!important（不推荐，仅应急用）

在按钮hover的color属性后添加!important，强制覆盖其他冲突样式：

.button-go-premium:hover {
  background-color: var(--primary-color);
  color: white !important;
}

效果验证 #

修改后，普通导航链接hover时依然显示--primary-color，带.button-go-premium类的链接hover时背景变为--primary-color、文字变为白色，两个样式均可正常生效。

内容的提问来源于stack exchange，提问作者WLFlul