设置页面一部分的链接样式，而不是另一部分

Question

首先，我想感谢您的到来，这几天来我比过去六个月在异地学习到的更多，所以这里的道具！ 我的问题是困扰我很长时间的问题，我找不到合适的答案，也许我是在问错问题。 基本上，我的标题导航有一些链接，我希望在不影响页面上其余链接的情况下自定义这些链接。 我希望他们使用纯CSS在鼠标悬停时更改颜色，而无需更改主体中的链接。 由于a：link a：visited等似乎是他们自己的课程，所以我该怎么做：/预先谢谢！

Answer 1

只需使用父选择器，包装您要编辑的链接，而无需在包装器中更改其他任何链接

html

<div id="header"><a href="">styled link</a></div>
<a href="">not styled link</a>

的CSS

#header a, #header a:active, #header a:link, #header a:visited { color: white }
#header a:hover { color: blue }

还请注意，由于安全问题，最新版本的Firefox和chrome不支持：visited伪类

Answer 2

的HTML：

<a class='fancylink'>Hi</a>
<a>No Fancy Link</a>

CSS：

.fancylink{
    color:blue;
    text-decoration:none;
}

.fancylink:hover{
    color:yellow;
}

它不是设计的主要内容，但可以回答您的问题。 =）

Answer 3

<div class="firstbit">
   <a href=......

</div>

然后

.firstbit a,
.firstbit a:hover
{
   Style stuff here
}

然后执行相同操作，但更改类的名称

Answer 4

您想在CSS中使用特异性。 这可以通过多种方式完成。

方法1：类

首先，向所有导航链接添加一个类似的类，例如<a href="#" class="classname"></a>

其次，在CSS中，添加

a.classname:link {} 
a.classname:visited {} 
/* etc */

方法2：容器

首先，将所有导航链接分组在称为容器的标签内

<div id="idname">
<a href="#"></a>
<a href="#"></a>
</div>

二，在CSS中

#idname a:link {}
#idname a:visited{}
/* etc */

Answer 5

CSS选择器有多个部分，以空格分隔。 这些部分中的每一个都从上一部分的子项（或子项的子项，依此类推）中选择，如果是最后一部分，则选择整个页面。 （如果里面有>之类的，这种行为就会改变，但这与这个问题无关）

这些部分中的每个部分都可以具有多个用于过滤的内容。 例如，您提到a:link 。 这是两个部分： a ，它过滤到a标签，和:link ，它过滤到链接。 如果将它们放在一起，它会显示“链接a标签”。

如果您使用此ID为选择器（ #id ），你可以制造类似#header a:link ，这将只针对a标签，它是其中有一个元素链接id的header 。