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>

Answer 2

在CSS中，您将样式应用于a

中的所有 HTML

为防止这种情况，您必须通过添加button或a属性来专门那些class或id并在css中为其设置样式（对于类，您必须在css（.中的类名之前添加.className，并为id #（#idName）添加id：{ / p>

在此处了解有关CSS中选择器的信息：https://www.w3schools.com/cssref/css_selectors.asp

.button{
    font-size: 12px;
    font-family:  'Montserrat', sans-serif;
    text-align: left;
}
.spesificA:link, .spesificA: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" class="spesificA">Contact me</a>
    </div>
    <div>
    <p>Now I want to add a normal link but it looks like
<a href="page.php">a button not spesific class(without style)</a></p>
</div>

为链接尝试不同的伪类？

2 个答案: