你的问题出在**:any-link伪类的使用导致样式优先级冲突**，以及选择器特异性的问题，使得你的颜色和背景色修改无法覆盖原有样式。

为什么会失效？ #

:any-link伪类会匹配所有链接状态（已访问/未访问），但它会给选择器增加额外的特异性（和:hover/:active这类伪类的特异性相同）。当你用.btn--1:any-link设置颜色后，后续的.btn:hover选择器因为特异性相同，且在CSS中出现顺序更早，无法覆盖它；同理，背景色的修改也会因为同样的优先级问题不生效。

另外，即使你尝试去掉伪类直接设置.btn，如果之前的:any-link样式还存在，它的特异性更高，依然会覆盖你的.btn样式。

修复后的代码 #

只需要移除所有:any-link伪类，直接使用类选择器来定义基础样式即可，这样hover/active状态的样式（类+伪类）特异性更高，能正确覆盖基础样式：

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
:root{
 --bright-orange: hsl(31, 77%, 52%);
 --dark-cyan: hsl(184, 100%, 22%);
 --very-dark-cyan: hsl(179, 100%, 13%);
 --transparent-white: hsla(0, 0%, 100%, 0.75);
 --very-light-gray: hsl(0, 0%, 95%);
 font-size: 15px;
}
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.btn{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 50px;
 width: 150px;
 border: 2px solid var(--very-light-gray);
 border-radius: 50px;
 background: var(--very-light-gray);
 font-family: 'Lexend Deca', sans-serif;
 text-decoration: none;
}
.btn--1{
 color: var(--bright-orange);
}
.btn--2{
 color: var(--dark-cyan);
}
.btn--3{
 color: var(--very-dark-cyan);
}
.btn:hover, .btn:active{
 color: var(--very-light-gray);
}
.btn--1:hover, .btn--1:active{
 background: var(--bright-orange);
}
.btn--2:hover, .btn--2:active{
 background: var(--dark-cyan);
}
.btn--3:hover, .btn--3:active{
 background: var(--very-dark-cyan);
}

额外检查点 #

如果修改后还是不生效，检查你的showcase__btn类是否有设置color或background样式，如果有，需要确保.btn和.btn--*的样式定义在它之后，或者使用更高特异性的选择器（比如.showcase__btn.btn--3）来覆盖它。

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