: Link,: visited,: focus,: hover,: Active

Source: Internet
Author: User

CSSAlso known as the stacked style sheet, the so-called stacked style is that the style behind will overwrite the previous style, so in the style sheet, the order of each style is very exquisite.

: LinkAnd: VisitedThe order in the style file can be placed at will.

WhileFocus,Hover,ActiveIf the order you set is different, the display effect of the style will be directly affected, which will be explained in detail below.

: Focus->: hover->: Active

 

Some may be confused. Why do we have to follow this order without disrupting it? In fact, each of their selectors represents a meaning.

: LinkIt indicates the style of the access link, so as long as you are a hyperlink and have not been accessed, the link will be displayed according to the style you set, so its location order does not matter.

: VisitedIndicates the style after the link is accessed. Once the link is accessed, its style will be the visited style you set.

Focus on the following:

: FocusIt indicates the style when the focus is obtained. Some people say that the style when the focus is obtained. This can be viewed through the tab key. Once the focus is obtained through the link, then its style is set by youFocusStyle.

: HoverIt indicates the style when your cursor passes through an element.: FocusWhen the link obtains the focus: FocusStyle. When the cursor passes through this linkHoverBecauseHoverOverwriteFocusStyle.

If: HoverBefore,: FocusAfter, it is displayed when the cursor gets the focus: FocusBut when the cursor goes through the link, the style is not displayed: HoverBut continue to be: FocusBecause the application'sFocusStyle inHoverAnd overwrite the previous style.

The test code is as follows:

A: Focus{

Color: # aa80fe;

Text-Decoration: underline;

}

A: hover{

Color: # ff0000;

Text-Decoration: underline;

}

A: hover{

Color: # ff0000;

Text-Decoration: underline;

}

A: Focus{

Color: # aa80fe;

Text-Decoration: underline;

}

: ActiveIt indicates the style when the element is activated, that is, the style when the element is pressed. If the active selector and: focus,: hover change the position, the display effect will be different, because the style at the back will overwrite the style at the front.

The test code is as follows:

A: hover{

Color: # ff0000;

Text-Decoration: underline;

}

A: active{

Color: # ffcc00;

}

 

A: active{

Color: # ffcc00;

}

A: hover{

Color: # ff0000;

Text-Decoration: underline;

}

You may ask, if CSS is a stacked style table, does it mean that the style written at the end will certainly overwrite the style at the front?

You can refer to another tutorial:Practical explanation of selector priority sequence in CSS

Welcome to the internet technology exchange group: 62329335

Personal statement: the shared blog is absolutely original, and strives to verify every knowledge point through practical demonstration.

This article from the "Flowers will open" blog, please be sure to keep this source http://itdriver.blog.51cto.com/9109476/1535190

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.