Question

我正在为我使用的网站创建代码。链接颜色有多个不同的区域，它们似乎重叠，我不确定如何解决它。

我的HTML

<div class="floatbox" style="width:200px;height:200px;padding:5px;font-size:15px;position:fixed;left:2px;bottom:10px;overflow:auto;font-color:#3c5eb2;">
</div>

在此我有链接。我的CSS是

#floatbox a:link, a:visited, #a:active{color: #BF00FF;}
#floatbox a:hover {color: #BF00FF;text-decoration: underline;}

我尝试过使用＆＃34;！important＆＃34;标签，没有任何工作。如果标签不在那里，则页面上的所有链接都保持白色。如果我添加＆＃34;！important＆＃34;标签，网站的一半链接变成了紫色。我是初学者编码器，我可能不会正确地瞄准课程。

任何帮助表示赞赏！

Fiddle

Answer 1

如果这是您的实际代码，那么有一些（简单的）与您尝试实现的内容不一致：

1）你定义了#floatbox：这是一个CSS选择器，目标是一个等于“floatbox”的特定ID，而你想要定位一个类。定位类的正确语法是在名称前加上“。”。所以你想要CSS文件中的“.floatbox”

2）你在CSS的第一行看起来像一个小错字：“＃a：active”应该是“a：active”

w3C学校对简单选择器有一个直截了当的解释：

http://www.w3schools.com/css/css_selectors.asp

：link，：visited等。伪选择器对它们声明的顺序也很敏感，这里再次解释：

http://www.w3schools.com/css/css_pseudo_classes.asp

我自己永远无法记住订单：）

ETA：看看你的小提琴，问题是你有一个ID - “#white” - 用“floatbox”类包围div。 ID样式优先于类样式，即使在此处非常具体地应用也是如此。我想说最简单的方法就是改变基于“.white”类的风格的“#white”id样式，然后你应该看到你喜欢的优先级。

Answer 2

了解使用CSS时所需的工具非常重要。如果出现意外行为，请使用Developer Tools in Chrome或Firebug For Firefox。这些工具使您能够在浏览器中检查元素，并查看哪些CSS规则正在影响它们，同样重要的是要覆盖哪些规则。

您还需要了解Cascading and Specificty

的原则

更新

你的html中有一个类（应该是这样）和CSS中的ID。

尝试以下内容：

div.floatbox a:link, 
div.floatbox a:visited, 
div.floatbox #a:active
{
    color: #BF00FF !important; 
}

div.floatbox a:hover {color: #BF00FF !important;text-decoration: underline;}

http://jsfiddle.net/54UQg/4/

或

由于.floatbox是#white的孩子，您可以使用特异性规则来避免使用!important：

#white div.floatbox a:link, #white div.floatbox a:visited, #white div.floatbox #a:active { color: #BF00FF; } #white div.floatbox a:hover {color: #BF00FF ;text-decoration: underline;}

http://jsfiddle.net/54UQg/5/

你的原始问题源于2个问题，当你是一个类时，你用CSS定位了一个ID，其次，ID排名高于特殊规则中的类。

具有CSS的特定HTML类

2 个答案: