Question

我的代码显示出异常行为。我不知道为什么将状态添加到.btn类后，Web浏览器会完全忽略按钮的所有CSS功能。因此，按钮的显示方式没有它们的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>

Answer 1

状态为a的{{1}}标记与没有状态为:link的{{1}}并不完全相同。此状态适用于:link 已定义href

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

<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;
}

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

1 个答案: