按钮文本颜色无法修改及CSS中text-decoration:none失效问题求助

你的问题根源在于按钮内部的<a>标签自带浏览器默认样式，父元素.button的样式无法覆盖它，且之前的CSS未直接选中<a>标签修改样式。

1. 修复文本颜色与下划线问题 #

在CSS中，给.button内部的<a>标签添加直接样式，覆盖浏览器默认的链接规则：

.button{
    background-color:white;
    height:6.5vw;
    width:10vw;
    display:inline-block;
    border:none;
    font-family:Aleo;
    text-align:center;
    position:fixed;
    top:0;
    right:0;
    font-size:3vw;
}
/* 新增：直接选中按钮内的链接 */
.button a {
    color: black;
    text-decoration: none;
}

之后删掉HTML内联的style="text-decoration:none"，CSS即可正常生效。

为什么之前的方法无效？ #

• 浏览器对<a>标签有默认样式（蓝色文本、下划线），这些规则优先级高于父元素样式，因此给.button设置color:black无法传递给内部<a>。
• 之前text-decoration:none写在.button里，是给按钮本身设置而非内部链接，自然无效；内联样式优先级最高所以能生效，但并非最优写法。

额外小问题（非核心） #

你的@font-face代码存在错误：src中不应包含<meta>和<title>标签，这会导致字体加载失败。由于你已经通过@import引入了Stack Sans Notch字体，建议删除这段错误的@font-face代码。

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