需要使用Flexbox CSS设置按钮样式的帮助吗

我试图在Flexbox代码中设置历史按钮的样式，以匹配导航条链接的样式。我似乎无法将悬停、活动、访问、链接CSS代码应用于整个按钮。此外，该链接在Firefox中根本不会打开，但会在Chrome和MS Edge中打开历史页面

 .card .text > button {
background: #6e6b5c;
border: 0;
font-family: 'Days One', sans-serif;
font-weight: normal;
color: lightgrey;
/*text-decoration: none;*/
padding: 10px;
width: 100%;
}

.card > button a {
text-decoration: none;

}

.card > button a:link, button a:visited {
background: #6e6b5c;
color: lightgrey;
text-decoration: none;
}

.card > button a:hover, button a:active {
    background-color: #7d654b;
    color: white;   
    text-decoration: none;
}

代码笔在这里：

Codepen请求帮助的帖子在这里：（但我不确定人们是如何找到这些别针和帖子的！Codepen也是新手）

---

由于我是一个不断编写代码的新手，这是我第一次使用Flexbox，我从Quackit那里借用了Flexbox卡的原始代码，根据导航代码对我的样式进行了调整，并最终添加了链接，这导致了各种各样的问题。

这就是我对组件样式所做的：

a[href=“history.html”]{

颜色：白色；

文本装饰：无；
}

另外，是否需要使用

标记？你能不能给你的

标签一个类？像这样

<a href="something.html" class="btn">Something</a>

---

更像是

1，

按钮

和

a

是两个不同的东西。不要将

a

嵌套在

按钮内

。你使用它们的目的完全不同

a

用于

link

所以链接一些东西

按钮

用于事件，例如表单中的

提交

或

javascript中的事件。所以要么使用
按钮
要么使用
a

在你的情况下，我看到你想链接一些东西，所以使用
a
（不带按钮）

2、
.card>按钮a:link
错误，因为
是一个
直接后代选择器
，但
按钮
在
内。文本
在
.card
内。因此，
按钮
不是
卡
的直接后代

3、
.card>按钮a:hover，按钮a:active{
将选择
a:hover
内
按钮
卡

的直系后代（参见2）它将选择页面上所有

按钮
内的所有
a:active
，因此不仅仅是
卡
内的那些。如果您想这样做，您应该将父选择器添加到两个选择器中。因此您的代码看起来像
。卡>按钮a:hover，.card>按钮a:active

第2点、第3点只是为了提供信息，以便在将来帮助您，但它们在这里毫无用处，因为您在
按钮中没有
a

要设置
a
的样式，就像设置
按钮一样，只需将样式写入以下选择器中即可

.card.text>按钮，.card.text>a{
然后对于
悬停
和
活动
状态使用

.card.text>a:hover、.card.text>a:active{

请参阅下面的代码片段。如果您有任何其他问题，请在注释中提问


/*style.css*/
/*使HTML5布局元素阻止旧浏览器的元素*/
页眉、导航、旁白、文章、页脚、节{
显示：块；
} 
@导入url（'https://fonts.googleapis.com/css?family=Days+一个“洛拉”；
身体{
字体大小：120.0%；/*14pt 19px*/
字体系列：“Lora”，衬线；
线高：1.375；
背景颜色：淡蓝色；
背景图片：url（images/wood.jpg）；
}
标题{
文本对齐：居中；
}
h1{
文本对齐：居中；
字体系列：“第一天”，无衬线；
线高：1.250；
字体大小：2.500em；/*32pt 42px*/
字体大小：粗体；
字体风格：普通；
垫面：1米；
}
氢{
字体系列：“Lora”，衬线；
线高：1.333；
字体大小：1.500em；/*18pt 24px*/
字号：700；
字体：斜体；
}
h3{
字体系列：“Lora”，衬线；
线高：1.333；
字体大小：1.200em；/*14pt 19px*/
字号：700；
字体：斜体；
}
收割台h3{
字体风格：普通；
保证金：0；
}
p{
字体大小：1.000em；/*12pt 16px*/
字体大小：正常；
字体风格：普通；
}
p、 脚注{
字体大小：.95em；/*11 pt 15px*/
}
/*段落文本链接的样式规则*/
p a{
文字装饰：无；
字体大小：粗体；
}
p:link，a:visited{
颜色：#7d654b；
}
p a:悬停，a:激活{
文字装饰：下划线；
}
/*包装器div的样式规则*/
#包装纸{
宽度：90%；
最小宽度：600px；
最大宽度：1200px；
保证金：1em自动；
填充：3em；
背景色：rgb（228238248）；
}
/*样式规则
打开通往施泰特的大门
乌克兰斯塔维什-49°23'北纬30°12'东经
斯塔维什切特[乌克兰，俄罗斯]、斯塔维什特[荷兰]、斯塔维什切特[波兰]、斯塔维什切斯、斯塔维什、斯塔维什切特、斯塔维伊斯
互联网有一种将人们聚集在一起的方式。这个网站是一个例子，展示了通过自己的家族史研究在网上结识的斯塔维什特后裔是如何聚在一起重建一个很久以前存在的什特尔人的记忆的。
祝您访问愉快
人
通过近2000名居民的数据库，了解世纪之交斯塔维什的居民

居民
埋葬
寻找世界各地的墓地，那里的守护神们死后仍在一起

墓地
故事
想象一下，我们的祖先生活在斯塔维什特人、他们的子孙后代的散文中

阅读
今天的斯塔维什
通过在线链接、图片和视频访问Stavishche of today

参观
a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}