我正在尝试更改的字体颜色，但它不起作用。背景颜色的改变也不起作用。我已经尝试使用十六进制的符号，但它也不起作用。我还尝试在没有伪类的情况下为.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
你可以这样做：
.btn{
color: var(--dark-cyan)
}
就像@matrin说的，你不需要：any-link
