Question

我想在一个特定的div中为我的链接创建独特的样式（例如，我希望主体中的所有链接都是粗体和红色，但是在sidebardiv中我希望它们是蓝色和斜体）我该怎么做呢？

我有：

a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}

但是，如果我把它放在侧栏div部分，那就会弄乱我的

Answer 1

使用descendant selectors：

#sidebar a:link{ color:#134896; } 
#sidebar a:visited{ color:#330033; } 
#sidebar a:hover{ color:#942A5F; } 
#sidebar a:active{ color:#6FB25C}

这是一个基本的css选择器类型，您可以根据需要链接尽可能多的后代选择器，即：

#content .navigation .header h1.red {
  /* Properties */
}

这将匹配任何<h1 class="red">，它是具有类header的元素的后代，它是具有类navigation的元素的后代，该元素是具有id的元素的后代content。

后代选择器是实际上跨浏览器工作的少数几种选择器类型之一，因此您可以依赖它们。应该注意的是，你应该尽可能少的选择器来实现你的目标，因为这将提升性能。另外，如果你可以避免它，请尽量不指定元素类型（这与JavaScript选择器的建议相矛盾），因为它会将你的css与html现在的样子联系起来。开发人员可以决定稍后将<span class="highlight">更改为<em class="highlight">，这会打破span.highlight - 选择器，而.highlight - 选择器将继续有效。

Answer 2

a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }

Answer 3

#divId a:link{ color:#666666; }

Answer 4

div#div_id a:link {style}

对每个div重复此操作多次，并且：visited，：active，：hover states。

Answer 5

a { font-weight: bold; color: red; }
#sidebardiv a { color: blue; font-weight: normal; font-style: italic; }

Div独特的CSS样式链接

5 个答案: