Question

在CSS属性中，有四个伪选择器可用于设置链接的样式。选择器是：link，a：visited，a：active和a：hover。你想这样做......

a:link{color:red;} 
a:visited{color:blue;}
 a:hover{color:green;}
a:active{color:yellow;}

这很有效，但是有更短和/或更简单的方法。

Answer 1

如果你想为每个伪目标制定不同的规则，那么你编写它的方式就是你做的最短的。如果规则集相同，您可以简单地用逗号分隔选择器：

a:link, a:visited, a:hover, a:active { color: red; }

在上面的示例中，每个伪的规则集是相同的，因此它可以缩短为：

a { color: red; }

使用这些特定的伪类时，be aware that order matters when declaring rulesets：

要正确设置链接样式，请将:link规则放在所有其他与链接相关的规则之前，如 LVHA订单所定义：:link - :visited - :hover - :active。

Answer 2

在普通的css中，这是最简单的方法，如果你想为应用程序的不同部分设置'a'标签的样式，你可以使用类或id，使用类的例子是：

HTML

<div class='classOfSomeSection'>
  <a href="#">This link is red</a>
</div>
<div class='classOfAnotherSection'>
  <a href="#">This link is green</a>
</div>

CSS

.classOfSomeSection a:link{
color:red;
}
.classOfAnotherSection a:link{
color:green;
}

还有其他涉及Javascript的方法来更改指定元素的伪类，但在我看来，css更简单。

Answer 3

如果您使用SCSS，则可以通过创建mixin来实现。它似乎在前面更长，但好处是你只需要编写一次mixin然后只需要在任何需要的地方包含它。

// set up vars for each state you want

$link: #00a400; // green
$visited: #870808; // deep red
$hover: #8ee1ff; // blue
$active: #df42f4; //pink

// set up mixin

@mixin link-color($color) {
    color: $link; 
    &:visited {
      color: $visited;
    }
    &:hover { 
      color: $hover;
    }
    &:active {
      color: $active;
    }
}

// use mixin

a {
  @include link-color($link);
}

Basic.subs method

所以你的问题的答案是肯定的，因为你可以把它写得更短，不，因为你必须在某处写一些东西。理想情况下，将你的mixins松散在一个文件中，这样你就不会弄乱你的视线。

在CSS中设置链接样式

3 个答案: