Question

我正在尝试设置页面中<a href=""></a>个元素的样式。但是，以下代码无效。

HTML

<div class="class-name">
    The quick brown <a href="//example.com">fox</a>
</div>

SCSS

.class-name{
    @include mixin-name(1.7rem 5rem, 1.5rem, 300, $fade-white);
}
a{
    &:link{
        color: $fade-white;
        &:visited{
            color: $white;
            text-decoration: none;
            opacity: 0.42;
        }
    }
    &:hover{
        opacity: 0.7;
        text-decoration: underline;
    }
    &:active{
        opacity: 1;
        text-decoration: none;
    }
}

在悬停时，下划线未显示在链接上。除了悬停，其他所有内容都在Safari上运行，但不在Chrome上运行。任何人都可以帮助解决这里出错的问题吗？

Answer 1

快速测试一下。确保您的mixin定义在顶部。并确保你开始使用text-decoration none链接，这样你就可以看到它改变了

我还删除了:link - 这是一个CSS伪类，它只适用于未访问过您的链接的情况。阅读here

$fade-white : #eee;
$white : #ccc;

a{
  color: $fade-white;
  text-decoration: none;

  &:visited{
    color: $white;
    text-decoration: none;
    opacity: 0.42;
  }
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  &:active{
    opacity: 1;
    text-decoration: none;
  }
}

Answer 2

您的SCSS错误，浏览器不会执行您提供的状态：

a {
   color: $fade-white;
   text-decoration: none;
   color: $white;

   &:visited{
    opacity: 0.42;
  }
  &:hover{
    opacity: 0.7;
    text-decoration: underline;
  }
  &:active{
    opacity: 1;
    text-decoration: none;
  }
}

:visited州将继承a声明

无法在SCSS中设置样式链接

2 个答案: