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

Question

first off I want to say thanks for making me welcome, I've learned more in the last few days on here than I have in the last 6 months offsite, so props! My question is one that has bothered me for a long time, I can't find an appropriate answer, perhaps I am asking the wrong question though. Basically I have links for my header navigation that I want to customize without affecting the rest of the links on the page. I want them to change color on mouse over, etc using purely css without changing the links in the body. How do I do this since a:link a:visited, etc seem to be their own class :/ Thanks in advance!

Answer 1

just use the parent selector, wrap the links you want to edit without changing any else in a wrapper

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 }

also note that the latest versions of firefox & chrome doesn't support :visited pseudoclass due to security issues

Answer 2

html:

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

css:

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

.fancylink:hover{
    color:yellow;
}

It's not much of a design but it answers your question. =)

Answer 3

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

</div>

then

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

Then do the same but change the name of the class

Answer 4

You want to use specificity within CSS. This can be done multiple ways.

Method 1: Classes

First, add a similar class to all navigation links eg <a href="#" class="classname"></a>

Second, in the CSS, add

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

Method 2: Container

First, group all of the navigation links within a tag known as a container eg

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

Second, in the CSS

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

Answer 5

CSS selectors have multiple parts, separated by spaces. Each of these parts selects from children (or children of children, and so on) of the previous part, or the whole page if it's the last one. (this behavior changes if there's things like > in there, but that's not relevant for this question)

Each of those parts can have multiple things that it uses to filter. For example, you mentioned a:link . This is two parts: a , which filters it to a tags, and :link , which filters it to links. If you put this together, it says " a tags which are links".

If you use this with the ID selector ( #id ), you can make something like #header a:link , which will only target a tags which are links in elements which have an id of header .