链接状态在我的代码中不起作用[重复]答案

【问题标题】：link states don't work in my code [duplicate]链接状态在我的代码中不起作用[重复]
【发布时间】：2018-12-09 08:32:39
【问题描述】：

我的代码显示了一个奇怪的行为。我不知道为什么当我向 .btn 类添加状态时，按钮的所有 CSS 功能都会被 Web 浏览器完全忽略。因此，按钮以没有 CSS 的方式显示。但是，如果我摆脱状态，css 会应用于按钮，并且它们会被浏览器很好地呈现。

您可以在下面找到我的代码。如果有人能帮助找出为什么向按钮添加状态是有问题的，我真的很感激。

/* links in general have 4 states
     hover, visited, link(normal mode) and active
 */

.btn:link,
.btn:visited {
  /* We use inline-block to be
     able to use hight and width
     for that*/
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;/* Removing the line under a word */
  text-decoration: none;
  border-radius: 200px;
}

.btn-full:link,
.btn-full:visited {
  background-color: #e67e22;
  border: 1px solid #e67e22;
  color: #fff;
}

.btn-ghost:link,
.btn-ghost:visited {
  border: 1px solid #e67e22;
  color: #e67e22;
}

.btn:hover,
.btn:active {
  background-color: #bf6516;
  border: 1px solid #bf6516;
}

&lt;a class="btn"&gt; This link is not working &lt;/a&gt;

【问题讨论】：

你在哪里找到了正常的状态？ .btn {} ?
是button 还是链接a？如果它是一个按钮，那么它是合乎逻辑的，因为它没有:link
是一行.
正常状态与.btn:link{}相同。不是吗？！

标签： css

【解决方案1】：

带有:link 状态的a 标签与没有:link 状态的标签并不完全相同。此状态适用于a定义了 href

:link CSS 伪类表示一个尚未被参观了。它匹配每个未访问的 <a>、<area> 或 <link> 元素 具有 href 属性。^ref

/* links in general have 4 states
    hover, visited, link(normal mode) and active
*/
.btn:link,
.btn:visited{
    /* We use inline-block to be
       able to use hight and width
       for that*/
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    background:pink;
}
.btn:hover,
.btn:active {
    background-color: #bf6516;
    border: 1px solid #bf6516;
}

<a href="#" class="btn">A link with href</a>
<a class="btn">A link without href</a>

所以为了确保它总是能更好地添加没有任何状态的样式：

/* links in general have 4 states
    hover, visited, link(normal mode) and active
*/
.btn,
.btn:link,
.btn:visited{
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    background:pink;
}
.btn:hover,
.btn:active {
    background-color: #bf6516;
    border: 1px solid #bf6516;
}

<a href="#" class="btn">A link with href</a>
<a class="btn">A link without href</a>

【讨论】：