一个css中的多个超链接样式

时间:2013-03-27 14:08:28

标签: css

我正在努力完成每个div的不同超链接样式。我有一个整体的超链接样式,然后一个div,我想在该div中的所有超链接完全不同的风格。我只是不确定如何编写CSS。任何帮助都会很棒。

a {color:#d85d5d; font-weight:bold; text-decoration:none;}
a:hover {color:#222; text-decoration:underline;}

.SingleLink
{
    #a
    #a:{
        text-decoration: underline;
    }

    #a:link {
        color: #0000FF;
    }

    #a:visited {
        color: #660099;
    }

    #a:active {
        color #FF0000;
    }

    #a:hover {
        font-weight: bold;
    }

}

所以基本上我页面中的所有内容都有第一个a。然后.SingleLink div中的任何内容都有不同的超链接样式。

谢谢!

2 个答案:

答案 0 :(得分:3)

你需要为每个使用类名,你不能像使用纯CSS在你的例子中那样包装它们。

使用下面的代码可以解决这个问题:

.SingleLink a {  text-decoration: underline; }

.SingleLink a:link { color: #0000FF; }

.SingleLink a:visited { color: #660099; }

.SingleLink a:active { color #FF0000; }

.SingleLink a:hover { font-weight: bold; }

答案 1 :(得分:3)

您需要为每个规则指定.SingleLink选择器,如下所示:

.SingleLink a:link { color: #0000FF; }

.SingleLink a:visited { color: #660099; }

.SingleLink a:active { color #FF0000; }

.SingleLink a:hover { font-weight: bold; }

使用{}对选择器下的规则进行分组只是某些CSS预处理器(如LESS)的有效语法,但无效为“纯”CSS。