Shulou(Shulou.com)06/03 Report--

This article shows you the style of active pseudo-class elements in CSS when they are activated. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

: active-- CSS: active pseudo-class, which applies to the style when an element is activated

Syntax:: active

CSS version: CSS1

Description:

Applies to the style when an element is activated, such as when the mouse is pressed in the area of the element but has not yet been released

The client (browser) can change its rendering effect according to the actions the user interacts with. CSS provides three pseudo classes for this situation: hover, active, and focus.

The above three pseudo classes are not mutually exclusive, and one element can be applied to several of them at the same time.

The active pseudo-class applies when an element is activated by the user, for example, for a period of time before the user releases the mouse after pressing the mouse. When the user releases the mouse, the original style of the element is restored.

Active, which means "activate, activate" in Chinese

Grammar

The code is as follows:

: active

A:active

A.class:active

Example

A:active

{

Color:yellow

Background:blue

Font-size:small

}

P:active

{

Color:yellow

Background:blue

Font-size:large

}

Div:active

{

Color:red

Background:lime

Font-size:small

}

View the demo: http://demo.jb51.net/js/2015/css_active/demo1.htm

Order of pseudo-class selectors: L-V-H-A

CSS provides four elements to set the color of the link, including: link,: visited,: hover,: active, which are declared in a certain order, which we call L-V-H-A for short, that is, link first, followed by visited, followed by hover, and finally active. Only in this way can the declaration ensure that the status of hover and active display the correct style.

Example

Uniformly define the styles of links in various states

A:link

{

Color:red

}

A:visited

{

Color:green

}

A:hover

{

Color:yellow

Background:blue

}

A:active

{

Color:lime

Background:red

}

Demo effect: http://demo.jb51.net/js/2015/css_active/demo2.htm

Multiple link styles can be defined on a page

You can define multiple link styles on one page. For example, the following example defines a connection between gray and white.

.gray: hover,.gray:focus,.gray:active,.gray:link,.gray:visited

{

Color:#999

}

.white: hover,.white:focus,.white:active,.white:link,.white:visited

{

Color:#000

Font-weight:bold

}

Demo page: http://demo.jb51.net/js/2015/css_active/demo3.htm

IE browsers do not support: active pseudo-classes for elements other than element A

IE6, IE7 (Q) and IE8 (Q) browsers do not support active pseudo-classes for elements other than element A, which can be tested by example 1.

Browser compatibility

CSS E:active pseudo-class browser compatibility selector IE6IE7IE8IE9FFCHOPSAE:activepartpartpartyesyesyesyesyes the above is the style of active pseudo-class elements in CSS when they are activated. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.