Question

以下是4种不同状态的文本链接的CSS - 链接，访问，悬停和活动。

我是否需要为每种类型的链接类执行此css代码，某些类甚至不会更改外观。（链接，访问，悬停，活动）如果只有文本链接的外观为悬停和链接而改变，我只需要下面的那些2的类或者我是否还应该使用全部4？

<style>
a.comment_mod:link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
a.comment_mod:visited {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
a.comment_mod:hover {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    border-bottom:1px dotted #000000;
}
a.comment_mod:active {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}
</style>

Answer 1

如果:link和:visited之间没有变化，您可以省略后者。如果:hover和:active相同，则相同。然后只需在:link中定义commeon部分，并在:hover中覆盖您想要更改的内容：

a.comment_mod:link {
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

a.comment_mod:hover {
    color: #000000;
    border-bottom:1px dotted #000000;
}

修改：如果您希望:active（链接上鼠标按钮停止时的样式）看起来像:link，请同时指定两者。如果您不指定它，它将看起来像:hover。所以要匹配你原来的造型：

a.comment_mod:link,
a.comment_mod:active
{
    font-family: arial;
    font-size: 14px;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

a.comment_mod:hover {
    color: #000000;
    border-bottom:1px dotted #000000;
}

Answer 2

首先，如果您所有的州都拥有共同的样式，您可以宣布这样的风格

a.comment_mod 
{
 font-family: arial;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
}

如果状态更改了样式，那么您将声明它。

a.comment_mod:hover
{
 color: #000;
 border-bottom:1px dotted #000000;
}

如果它们共享样式，您可以同时声明多个元素的样式：

a.comment_mod:hover, a.other_mod:hover
{
 color: #000;
}

Answer 3

您可以使用：

a.comment_mod {
   ... defaults ...
}

a.comment_mod:active {
  ... only things that change ...
}

文本链接问题的基本CSS？

3 个答案: