锚标签按钮不改变字体颜色，变量不起作用

Question

我正在尝试更改的字体颜色，但它不起作用。背景颜色的改变也不起作用。我已经尝试使用十六进制的符号，但它也不起作用。我还尝试在没有伪类的情况下为.btn设置样式，但它也不起作用。

码本

null

@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:any-link{
    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:any-link{
    color: var(--bright-orange);
}
.btn--2:any-link{
    color: var(--dark-cyan);
}
.btn--3:any-link{
    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);
}

<a class="btn btn--3 showcase__btn" href="#">Learn More</a>
<a class="btn btn--3 showcase__btn" href="#">Learn More</a>
<a class="btn btn--3 showcase__btn" href="#">Learn More</a>

null

Answer 1

你可以这样做：

.btn{  
  color: var(--dark-cyan) 
}

就像@matrin说的，你不需要：any-link