时间戳

首页 > 解决方案 > 链接状态在我的代码中不起作用

css - 链接状态在我的代码中不起作用

问题描述

我的代码显示出一种奇怪的行为。我不知道为什么当我向 .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;
}
<a class="btn"> This link is not working </a>

标签： css

解决方案

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

:linkCSS 伪类表示尚未访问的元素。它匹配每个未访问<a>的 ,<area>或具有 href 属性的<link>元素。参考

/* 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>

推荐阅读