html - 为链接尝试不同的伪类？

Question

我是编码新手，我遇到了一个看似简单的问题，但我无法解决。

我有一个按钮格式的链接，现在我文档中的所有链接都显示为一个按钮。

.button {
    font-size: 12px;
    font-family:  'Montserrat', sans-serif;
    text-align: left;
}
a:link, a:visited {
    background-color: rgb(55, 89, 238);
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 30px;
}

<div class="button">
        <a href="emailto:my@mail.com">Contact me</a>
    </div>
    <div>
    <p>Now I want to add a normal link but it looks like
<a href="page.php">a button</a></p>
</div>

编辑: 我想知道如何使我网站中的其他链接看起来正常？

Answer 1

您需要使用一个 css 后代选择器，它将包含按钮和链接以仅定位“按钮链接”，这将使所有其他链接单独存在。当您使用 .button 和 a:link 时只有一个空格，它会一起查找它们两个，并认为它们像后代一样相关。以下是如何做到这一点:

.button {
    font-size: 12px;
    font-family:  'Montserrat', sans-serif;
    text-align: left;
}
.button a:link, .button a:visited {
    background-color: rgb(55, 89, 238);
    color: white;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 30px;
}

<div class="button">
        <a href="emailto:my@mail.com">Contact me</a>
    </div>
    <div>
    <p>Now I want to add a normal link but it looks like
<a href="page.php">a button</a></p>
</div>