The "love-hate" principle of a tag style in CSS_html/css_WEB-ITnose

CSS prepares specific tools for some special effects, which we call "pseudo-classes". There are several of them that we often use. Below we will introduce in detail the four pseudo-classes that are often used to define link styles. They are:

1: link

2: visited

3 :hover

4 :active

Because we want to define the link style, the essential one is the anchor tag in the hyperlink - a, anchor The method of writing links between tags and pseudo-classes is the basic method of defining link styles. They are written as follows:

1 a:link, defines the style of normal links;

2 a:visited, Define the style of visited links;

3 a:hover, define the style when the mouse hovers over the link;

4 a:active, define the style when the mouse clicks on the link.

Example:

01 a:link {

02 color:#FF0000;

03 text-decoration:underline;

04 }

05 a:visited {

06 color:#00FF00;

07 text-decoration:none;

08 }

09  

10 a:hover {

11   color:#000000;

12   text-decoration:none;

14

15 a:active {

16 color:#FFFFFF;

17 text-decoration:none;

18 }

The link color defined in the above example is red, the visited link is green, the link is black when the mouse is hovering over it, and the link is white when clicked.

If the normal link and the visited link have the same style, and the mouse hover and click styles are the same, they can also be merged and defined:

1 a: link, a:visited {

2 color:#FF0000;

3 text-decoration:underline;

4 }

5 a:hover, a:active {

6 color:#000000;

7 text-decoration:none;

8 }

Order of link definitions

Nothing is perfect without rules. Although the link definition has been written, it also has rules. If the order of writing these four items is slightly wrong, the effect of the link may be lost, so every time When defining link styles, be sure to confirm the order of definition, link--visited--hover-active, which is what we often call the LoVe HAte principle (the capital letters are their first letters).

Foreigners have summarized an easy-to-remember "love-hate principle" (LoVe/HAte), which is the acronym of the four pseudo-classes: LVHA. Define the correct order of A link styles: a:link, a:visited, a:hover, a:active.

Why can’t we change the order of definitions? Just do a test.

Suppose we want to implement the following style:

Status style color

Visited a:visited red

a:link not visited Blue

Selected a:active Green

Move the mouse into a:hover Yellow

When the mouse moves in, it does not turn yellow. But when the link has been visited, it turns yellow when the mouse is moved:

1 a:visited{color:red;}

2 a:hover{ color:yellow;}

3 a:link{ color:blue;}

4 a:active{ color:green;}

This is because an unvisited link that the mouse passes over also has There are two attributes of a:link and a:hover. In the above CSS style, a:link is closest to it. First, satisfy a:link and abandon the repeated definition of a:hover.

After using the LVHA sequence declaration, it first checks the compliance standard of a:hover and changes color first.

Therefore, in order to comply with the "proximity principle" that browsers follow when interpreting CSS. When we define CSS, we should put the most general conditions at the top, move downwards, and put the most specific conditions at the bottom.

In the W3C specification, the declaration order of links is also specified:

In the CSS definition, a:hover must be placed after a:link and a:visited. is valid.

In the CSS definition, a:active must be placed after a:hover to be valid.

Define partial link style

Writing a:link{} definition in CSS will change the link style of the entire page, but some partial links require special ization, this problem is not difficult to solve, just add the specified id or class in front of the link style definition.

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

2 color:#FF0000;

3 text-decoration:none;

4 }

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

6 color:#000000;

7 text-decoration:underline;

8 }

HTML call:

1

链接到aa页面

The definition method of class is the same as id, as long as Just change #sidebar to .sidebar. Another way is to directly define the link style, which is more direct, but it is more troublesome to call. You need to add definition code to each specific link.

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

2 color:#FF0000;

3 text-decoration:none;

4 }

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

6 color:#000000;

7 text-decoration:underline;

8 background:#FFFFFF;

9 }