Adjust the CSS type order and change the link tumble effect _ CSS/HTML

You may have realized that you can adjust the sequence of CSS types to change the link tumble effect. You can specify different styles for each one-click link to create a CSS tumble effect, these links include common link (normal), access, flip, and activation. In addition, you may also know that the order of the CSS type can produce a difference in the effect. The post-order style of the CSS code will replace the pre-order style for the same element. It is very important to establish the type sequence of the tumble effect.
Now let's take a look at how to arrange the link state types to support normal tumble effects without conflict, and how to reschedule these types to get different tumble effects.

Link Status

The typical CSS tumble effect depends on the independent type of one of the four States in the hyperlink. You can create A <A> (Hyperlink) type with CSS preclasses to specify the link status:

A: link-general, non-access hyperlink

A: visited -- access hyperlink

A: hover-the link when the visitor clicks the mouse

A: active -- click the link

To make the typical CSS tumble effect work normally, the CSS type sequence in CSS code is very important, whether it is an external type table or a type rule embedded in the HIML page title bar.

A: The link type is the earliest because it can be applied to all links. A: The visited type is ranked second. It will replace the: link format of any link. (If the: link type is followed by a: visited, a: link may replace a: visited .) The second is a: hover type. This type is only applicable to links that access the mouse. The last is a: active. Therefore, when a link is clicked, it can replace all other types.

A: link {

Color: # 0000FF;

Text-decoration: underline;

Font-weight: normal;

Font-style: normal;

}

A: visited {

Color: # 3399FF;

Text-decoration: underline;

Background-color: # FFFFFF;

Font-weight: normal;

Font-style: italic;

}

A: hover {

Color: # 0000FF;

Text-decoration: underline;

Background-color: # FFFF00;

Font-weight: bold;

Font-style: normal;

}

A: active {

Color: # FF0000;

Text-decoration: none;

Background-color: # CCCCCC;

Font-weight: bold;

Font-style: normal;

}

The type order in CSS Code determines how each type replaces other types, that is, more types can be applied to specific elements. Under normal circumstances, the: hover type is behind the: link and a: visited types, so the hover type can be applied to regular and accessed links. However, it does not have to follow this method. You can change the type order to achieve different effects.

Suppose you want to use tumble effects in non-access links, but do not want to affect other access links, you may think of code to handle this kind of shape change, however, all you have to do is reorganize the CSS code.

Remove the tumble effect from the access link. You can simply remove the: visited type.

Note: The a: visited type contains rules that specify all the same attributes as a: hover. Otherwise, when a visitor's mouse passes an access link, it is not: any a: hover type attribute replaced by the visited type will be reproduced.

Source: webpage tutorial Network