我正在尝试在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在这里：https://codepen.io/Ovimel/pen/dKgrXa
请求帮助的Codepen帖子在这里：https://codepen.io/Ovimel/post/help-styling-css-flexbox-buttons（但我不确定人们如何找到这些图钉和帖子！也是Codepen的新功能。）
由于我是一名连续编码的新手，这是我第一次使用Flexbox，因此我从Quackit https://www.quackit.com/html/html_editors/scratchpad/?example=/css/flexbox/examples/flexbox_cards_align-items_stretch借用了Flexbox卡的原始代码，并根据Nav代码进行了样式调整，并最终添加了链接然后造成了各种各样的问题。
答案 0 :(得分：0)
这是我为组件设置样式的步骤：
a[href="history.html"] {
color: white;
text-decoration: none;
}
还需要使用<button>标签吗？您不仅可以给您的<a>标记一个类吗？像这样
<a href="something.html" class="btn">Something</a>
然后是CSS
a.btn {color: black; text-decoration: none}
a.btn:visited {color: purple}
a.btn:hover {color: grey}
更多类似的
答案 1 :(得分：0)
1，button和a是两回事。请勿将a嵌套在button内。您将它们用于完全不同的目的。 a是link的链接对象。 button可用于事件，例如形式为submit或javascript中的事件。因此，要么使用button要么使用a。
在这种情况下，我看到您要链接某些内容，因此请使用a（不带按钮）。
2，.card > button a:link是错误的，因为>是direct descendant selector，但是button在.text内部，而.card在button内部。因此，.card不是.card > button a:hover, button a:active {的直接后代。
3，a:hover将在button的直接后代card中选择a:active。 （请参阅2），它将选择页面上所有位置button内的所有card，因此不仅选择.card > button a:hover, .card > button a:active内的所有a。如果要这样做，则应将父选择器添加到两个选择器中。因此您的代码应类似于button
第2,3点只是为了将来的信息提供帮助，但在这里它们毫无用处，因为您不会在a中拥有button。
要像.card .text > button,.card .text > a {那样设置hover的样式，只需在以下选择器内编写样式
active，然后对于.card .text > a:hover, .card .text > a:active {和/* style.css */
/* Make HTML5 layout elements block elements for older browsers */
header, nav, aside, article, footer, section {
display: block;
}
@import url('https://fonts.googleapis.com/css?family=Days+One|Lora');
body {
font-size: 120.0%; /*14pt 19px */
font-family: 'Lora', serif;
line-height: 1.375;
background-color: lightsteelblue;
background-image: url(images/wood.jpg);
}
header{
text-align: center;
}
h1{
text-align: center;
font-family: 'Days One', sans-serif;
line-height: 1.250;
font-size: 2.500em; /*32pt 42px */
font-weight: bold;
font-style: normal;
padding-top: 1em;
}
h2{
font-family: 'Lora', serif;
line-height: 1.333;
font-size: 1.500em; /*18pt 24px */
font-weight: 700;
font-style: italic;
}
h3{
font-family: 'Lora', serif;
line-height: 1.333;
font-size: 1.200em; /*14pt 19px */
font-weight: 700;
font-style: italic;
}
header h3 {
font-style: normal;
margin: 0;
}
p {
font-size: 1.000em; /*12pt 16px */
font-weight: normal;
font-style: normal;
}
p.footnote {
font-size: .95em; /*11 pt 15px */
}
/*style rules for paragraph text links */
p a {
text-decoration: none;
font-weight: bold;
}
p a:link, a:visited {
color: #7d654b;
}
p a:hover, a:active {
text-decoration: underline;
}
/*style rule for wrapper div */
#wrapper {
width: 90%;
min-width: 600px;
max-width:1200px;
margin: 1em auto;
padding: 3em;
background-color: rgb(228, 238, 248);
}
/*style rule for <a> tags in the nav section #945D60 */
nav a {
background-color: #6e6b5c;
font-family: 'Days One', sans-serif;
line-height: 1.333;
font-size: .90em; /*11pt 15px */
font-weight: 500;
color: white;
text-decoration: none;
outline: none;
padding: 10px 0;
display: block;
float: left;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 25%;
text-align: center;
box-sizing: border-box;
/*box sizing for older browsers */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*unvisited and visited nav link styling */
nav a:link, nav a:visited {
background-color:#6e6b5c;
color: lightgrey;
}
/* hover and tap nav link styling */
nav a:hover, nav a:active {
background-color: #7d654b;
color: white;
}
article {
clear: both;
padding: 0 1em;
}
.cards {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin: 30px 0 0;
}
.card {
flex: 0 0 200px;
margin: 10px;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
text-decoration: none;
}
.card img {
max-width: 100%;
}
.card .text {
padding: 0px 10px 20px;
}
.card .text h4 {
font-family: 'Lora', serif;
line-height: 1.333;
font-size: 1.0em;
font-weight: 700;
font-style: normal;
margin-top: 6px;
margin-bottom: 5px;
text-align: center;
}
.card .text p {
padding-top: 2px;
}
.card .text > button,.card .text > a {
background: #6e6b5c;
border: 0;
font-family: 'Days One', sans-serif;
font-weight: normal;
color: lightgrey;
background: #6e6b5c;
display:block;
font-size:14px;
padding: 10px;
text-align:center;
width: 100%;
}
.card a {
text-decoration: none;
}
.card .text > a:hover, .card .text > a:active {
background-color: #7d654b;
color: white;
text-decoration: none;
}
footer {
background-color: #6e6b5c;
color: white;
text-align: right;
padding: 10px;
border: solid 3px #194a76;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
footer a {
color: white;
}
.logo {
border: solid 4px #194a76;
float: left;
position: relative;
}状态使用
<div id="wrapper">
<!-- Navigation bar -->
<nav role="navigation">
<a href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="#">GALLERY</a>
<a href="https://jewishgen.org" target="_blank">JEWISHGEN</a>
</nav>
<!-- Header -->
<header>
<h1>Opening the Door to Stavisht, the Shtetl</h1>
<h3>Stavishche, Ukraine - 49° 23' N 30° 12' E</h3>
<span>Stavishche [Ukr, Rus], Stavisht [Yid], Stawiszcze [Pol], Stawyszcze, Stavische, Stavishcha, Stavysce</span>
</header>
<!-- Page content -->
<p style="font-style: italic; text-align: center;">The Internet has a way of bringing people together. This site is an example of how Stavisht descendants, who have met online through their own family history research, have come together to reconstruct the memories of a shtetl that existed so long ago. <br> Enjoy your visit!</p>
<!-- Flexbox menu to inner pages -->
<main class="cards" role="navigation">
<article class="card">
<img src="images/seige.jpg" alt="old map" width="200" height="160">
<div class="text">
<h4>HISTORY / MAPS</h4>
<p>Explore the history of Stavishche from its founding as a garrison to the times of the pograms.</p>
<a href="history.html" >HISTORY</a>
</div>
</article>
<article class="card">
<img src="images/lechtzer.jpg" alt="Lechtzer family" width="200" height="160">
<div class="text">
<h4>PEOPLE</h4>
<p>Discover the residents of Stavishche at the turn of the century through the database of almost 2,000 residents.</p>
<button>RESIDENTS</button>
</div>
</article>
<article class="card">
<img src="images/cemetery2.jpg" alt="cemetery" width="200" height="160">
<div class="text">
<h4>BURIALS</h4>
<p>Find cemeteries throughout the world where Stavishters remain together in death.</p>
<button>CEMETERIES</button>
</div>
</article>
<article class="card">
<img src="images/torahcrown.jpg" alt="Torah crown" width="200" height="160">
<div class="text">
<h4>STORIES</h4>
<p>Imagine our ancestors lives through essays from Stavishters, their children, and grandchildren. </p>
<button>READ</button>
</div>
</article>
<article class="card">
<img src="images/citysign.jpg" alt="Stavishche sign" width="200" height="160">
<div class="text">
<h4>STAVISHCHE TODAY</h4>
<p>Visit Stavishche of today through online links, images, and videos.</p>
<button>VISIT</button>
</div>
</article>
<article class="card">
<img src="/pix/samples/16l.jpg" alt="Sample photo" width="200" height="160">
<div class="text">
<h4>MORE</h4>
<p>Give credit where credit is due.Far far away, behind the world's mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<button>THANK YOU</button>
</div>
</article>
</main>
请参见下面的代码段。如有其他问题，请在评论中提问。
UniqueConstraintuse FOS\UserBundle\Model\User as BaseUser;
use Symfony\Bridge\Doctrine\Validator\Constraints\UniqueEntity;
/**
* @UniqueEntity(fields={"email"}, message="This email address is already in use")
* @UniqueEntity(fields={"username"}, message="This username is already in use")
*/
class User extends BaseUser
{
//...
}