Adjust the order of CSS types to change the link scrolling effect_CSS/HTML

You may have realized that you can create CSS scrolling effects by specifying different styles for each link, including normal link (normal), access, flip, and activation. Also, you may also know that the order of CSS types can make a difference in performance. Post-order styles of CSS code will replace pre-order styles for the same element. The order in which types of roll effects are created is very important.
Now let’s see how to arrange the types of link state to support normal tumbling effects without causing conflicts, and how to rearrange the order of these types to obtain different tumbling effects.

Link status

Typical CSS scroll effects rely on independent types of one of four states in a hyperlink. The (hyperlink) type can be created with a CSS pre-class to specify the link status:

a:link - regular, non-accessible hyperlink

a:visited——Visited hyperlink

a:hover - the link when the visitor moves the mouse through

a:active——Click the link

In order for the typical CSS scrolling effect to work properly, the order of CSS types in the CSS code is very important, whether it is an external type table or a type rule embedded in the title bar of a HIML page.

The a:link type appears earliest because it can be applied to all links. The a:visited type comes second and will replace the a:link format of any link. (If the a:link type is followed by a:visited, a:link may replace the a:visited type.) Followed by the a:hover type, this type should only be used to access links under the mouse. Finally, there is a:active, so when the link is clicked, it replaces 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 order of types in CSS code determines how each type replaces other types, i.e. more types can be applied to a specific element. Normally, the a:hover type comes after the a:link and a:visited types, so the hover state type can be applied to regular and visited links. However, it doesn't have to be this way, you can change the order of the types to achieve different effects.

Suppose you want to use a scrolling effect on non-visited links, but do not want to affect other visited links, you may think of handling this appearance change through code, but what you have to do is to reorganize the CSS code.

Removing the scrolling effect from visited links can be easily done by removing the a:visited type.

Note that the a:visited type contains rules for specifying all the same attributes as a:hover. Otherwise, when the visitor's mouse passes through a visit link, any a:hover type attributes that are not replaced by the a:visited type will be Will continue to reappear.

Source: Web Teaching Network