如何为不含.dropdown-toggle的.btn:hover设置样式并解决优先级冲突？

问题背景 #

需要为所有带有:hover伪类的.btn元素设置样式，但需排除同时拥有.dropdown-toggle类的元素。尝试两种选择器写法后均出现异常：

尝试1 #

.btn:not(.dropdown-toggle):hover {
   background-color: inherit;
}

该写法会在按钮悬停和点击时都应用:hover样式，不符合预期。

尝试2 #

div:not(.dropdown) > .btn:hover {
   background-color: inherit;
}

结果与尝试1完全一致，问题未得到解决。

问题根源 #

点击按钮时，元素会同时触发:active和:hover伪类。常规情况下:active优先级高于:hover，但这里自定义的:hover选择器（带:not限定）优先级更高，导致点击时显示:hover的样式，而忽略了:active的样式。例如测试中“Regular button”点击时预期背景变为浅蓝色（:active样式），实际却显示:hover的红色背景，仅在点击后移开鼠标才会显示正确的:active颜色。

解决方案 #

要修复这个优先级冲突，需让:active选择器的优先级与自定义:hover选择器持平或更高，以下两种方案均可：

方案1：为:active添加相同的:not限定 #

通过给:active选择器加上和:hover一致的:not条件，让两者优先级持平，此时:active会按规则覆盖:hover样式：

/* hover样式：排除dropdown-toggle类的.btn */
.btn:not(.dropdown-toggle):hover {
  background-color: red;
}
/* active样式：使用相同的:not限定，确保优先级与hover持平 */
.btn:not(.dropdown-toggle):active {
  background-color: lightblue;
}

方案2：提升:active选择器的优先级 #

通过增加父级选择器等方式提升:active的优先级，确保其能覆盖:hover样式（不推荐使用!important，除非万不得已）：

.btn:not(.dropdown-toggle):hover {
  background-color: red;
}
/* 通过添加body父选择器提升active优先级 */
body .btn:active {
  background-color: lightblue;
}

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