Question

作为我的第一个使用CSS的项目我对如何使导航按钮的绿色背景不再继续使用我正在使用的代码查看器（SyntaxHighter）中的内置按钮感到困惑。如果您查看下面的网站并将鼠标悬停在代码框上，则会出现用于复印和打印的按钮，但它们也具有绿色背景。这是来自我用来格式化导航栏的CSS，是否有一个简单的解决方法，使导航栏的CSS文件只影响导航栏而不是代码片段样式部分？

http://dl.dropbox.com/u/3209672/website/main.html



ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}

Answer 1

是，将类（或id）应用于导航栏列表，并将颜色/背景颜色声明移动到该特定元素的css。

<ul class="colorThisListOnly">

<!-- other stuff -->

</ul>

使用css：

ul.colorThisListOnly
{
color: #fff;
background-color: #98bf21;
}

导致“出血”的原因是您将a（链接）定位为样式，而不是列表本身。当您在多个地方使用a代码时，它们都会被同一个选择器定位，因此风格相同。

如果你愿意，你当然可以解决a标签，但是根据他们的父母选择它们：

ul.colorThisListOnly > li > a:link,
ul.colorThisListOnly > li > a:visited
{
color: #fff;
background-color: #98bf21;
}

Answer 2

您需要使用更具体的内容覆盖所有样式，如下所示：

.toolbar a:link, .toolbar a:visited {background-color: #000;}
.toolbar a:hover, .toolbar a:active {background-color: #000;}

CSS全局链接背景问题

2 个答案: