A label style principle in CSS

CSS for some special effects to prepare a specific tool, we call it "pseudo class." There are a few of them that we often use, and we'll go into the details of the four pseudo classes that are often used to define the link style, respectively:

The

code is as follows:


: Link


: Visited


: Hover


: Active

Because we want to define the link style, so it is essential is the anchor tag in the hyperlink--a, anchor tags and pseudo class linked to write the method is to define the link style of the basic methods, they are written as follows:

The

code is as follows:


A:link, defines the style of the normal link;


a:visited, defines the style of the link that has been visited;


a:hover, defines the style of the mouse hovering over the link;


a:active, defines the style of the mouse-click link.

Example:

The

code is as follows:


A:link {


color: #FF0000;


Text-decoration:underline;


}


a:visited {


color: #00FF00;


Text-decoration:none;


}


a:hover {


color: #000000;


Text-decoration:none;


}


a:active {


color: #FFFFFF;


Text-decoration:none;


}

The link color defined in the above example is red, the link after the visit is green, the mouse hovers over the link is black, the color is white when clicked.
If the normal link and the visited link style are the same, the mouse hover and click the same style, you can also combine them to define:

The

code is as follows:


A:link, a:visited {


color: #FF0000;


Text-decoration:underline;


}


a:hover, a:active {


color: #000000;


Text-decoration:none;


}

Order of link definitions
No rules radius, although the link definition has been written, but it is also a rule, if the four items are slightly wrong in the writing order, the effect of the link may not be, so each time you define the link style must confirm the order of the definition, link--visited--hover-active, That's the love hate principle that we often talk about (uppercase letters are their initials).
The foreigner summed up a memorable "love and Hate Principle" (love/hate), namely the first letter of four kinds of pseudo class: Lvha. Define the correct order of the A link style: A:link, a:visited, A:hover, a:active.
Why can't we change the order of definitions? Just take the test.
Let's say we want to implement the following style :

State	Style	Color
Has visited	a:visited	Red
Not accessed	A:link	Blue
Selected	A:active	Green
Mouse move into	A:hover	Yellow

The
mouse moves in and does not turn yellow. But when this link has been accessed, the mouse is moved to yellow:





 

The

code is as follows:


a:visited{color:red;}


a:hover{Color:yellow;}


a:link{Color:blue;}


a:active{Color:green;}

This is because, a mouse through the unlinked link has a:link,a:hover two attributes, in the above CSS style, a:link closest to him, first meet the a:link, and give up the a:hover of the duplicate definition.
After using the LVHA order declaration, it first checks the A:hover's compliance criteria and first changes color.
So, in order to conform to the browser to explain the CSS followed by the "proximity principle." In the definition of CSS, we should put the most general conditions on the top, and then down, the most special below.
The order in which links are declared is also specified in the standard for the consortium:
In the CSS definition, a:hover must be placed after A:link and a:visited, which is valid.
In the CSS definition, a:active must be placed after a:hover, which is valid.
define a local link style
The definition of a:link{} in CSS will change the link style of the entire page, but some local links need to be specialized, and this problem is not difficult to solve, as long as the link style definition before the specified ID or class.

The

code is as follows:


#sidebar a:link, #sidebar a:visiteid {


color: #FF0000;


Text-decoration:none;


}


#sidebar a:hover, #sidebar a:active {


color: #000000;


Text-decoration:underline;


}

HTML Call:

The

code is as follows:


<div id= "sidebar" ><a href= "aa.aspx" target= "_blank" > Link to AA page <a></div>

Class is defined by the same method and ID, as long as the #sidebar is changed to. Sidebar, there is a way to directly define the style of the link, which is more direct, but the call is more cumbersome, you need to give each specific link to define the code.

The

code is as follows:


a.redlink a:link, A.redlink a:visiteid {


color: #FF0000;


Text-decoration:none;


}


a.redlink a:hover, A.redlink a:active {


color: #000000;


Text-decoration:underline;


background: #FFFFFF;


}