为链接尝试不同的伪类？

Question

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

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

.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>

编辑：我想知道如何使我站点中的其他 link 看起来正常？

Answer 1

在您的 css 中，您将样式应用于所有 a，您在 HTML

中

为了防止它你必须特定那些button或a通过添加class 或 id 属性并在 css 中为它们设置样式（对于 class 您必须在 css 中的 class 名称之前添加 . （ .className) 和 id # (#idName)):

在这里了解 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>

Answer 2

您需要使用包含按钮和 link 的 css 后代选择器来仅定位 "button link"，这将留下所有其他 link一个人。当您使用 .button 和 a:link 且两者之间只有一个 space 时，它会一起查找它们两个，并认为它们像后代一样相关。以下是如何做到这一点：

.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>

为链接尝试不同的伪类？

Trying different pseudo-classes for links?

html

css

button

pseudo-class

为链接尝试不同的伪 类？

Trying different pseudo-classes for links?

html

css

button

pseudo-class

为链接尝试不同的伪类？