How to use CSS pseudo class

The word "CSS" is so strange that it seems to me more like a label that identifies a particular state.

And the classes in the program.

Pseudo-Class with: Following the selector, identifies some states

:: Indicates CSS3 some new pseudo class, the suggestion all uses::. I don't support CSS3 's browser this year.

Examples of these pseudo classes:

Link links are not yet clicked by the user
visited already clicked on the link
Hover the mouse pointer over the link
Active link is being clicked (mouse pressed on element, not released)
:: First-letter give me feel more like an enhanced selector

P::first-letter {font-size:300%;}
p::first-line {font-variant:small-caps;} ditto

P.age::before {content: "Age:";}
P.age::after {content: "Years.";}

This is already a change.

Css:active pseudo class, applicable to the style when an element is activated

Syntax:: Active
CSS version: CSS1

Description
Applies to a style when an element is activated, such as when the mouse is pressed in the region of this element but has not been released
The client (browser) can change its rendering effect according to the action that the user interacts with, CSS provides three pseudo classes for this situation: hover, active, focus
The above three pseudo classes are not mutually exclusive, and an element can be applied to several of them at the same time
: Active pseudo class for a period of time before an element is activated by the user, such as when the user releases the mouse after the mouse is pressed. Restores the original style of the element when the user releases the mouse
Active, Chinese "activating, active" means

Grammar

: 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;
}
Css:active Pseudo Class Example--you can try editing

Css:active Pseudo Class Example
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, their declarations are in a certain order, we call this order for the l-v-h-a, that is, link first, then visited, then hover, Last active, so declaration to ensure that the hover and active state display the correct style

Example

Unified definition of links in various state styles

A:link
{
color:red;
}
a:visited
{
Color:green;
}
A:hover
{
Color:yellow;
Background:blue;
}
A:active
{
Color:lime;
background:red;
}
Css:active Pseudo Class Example--you can try editing

CSS Pseudo class example, unified definition of links in various states of the style
A page can define multiple link styles

You can define a variety of link styles on one page, such as the following example that defines a connection between gray and white styles

. 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;
}
Css:active Pseudo Class Example--you can try editing

CSS Pseudo class example, a page that defines multiple link styles
IE browsers do not support elements other than element a: active pseudo class

IE6, IE7 (q), IE8 (q) Browsers do not support elements other than element a: active pseudo class

CSS3 Target Pseudo class

The CSS3 target pseudo class is one of many useful CSS3 features. It is used to match the target element of a marker in the URI of the document (page). Specifically, a marker in a URI usually contains a "#" character followed by a name of a marker, such as #respond,target, which matches an element with an ID of respond.

Now in the page, click on an ID link, the page will only jump to the appropriate location, but there will not be a more obvious UI identification, use: The target pseudo class can be like: hover and other pseudo classes to define the style of the target element.

Browser support

Because we are talking about CSS3, it is now supported by all browsers except Ie6-8, but IE9 will support this pseudo class. This is rather regrettable, but this reality does not affect your use of it.

How to use: Target

: The target pseudo class and: hover,: Link,: Visited,: Focus, and other pseudo-class usage is the same:

selector:target{color:red;/other styles/}

Instance

Let's demonstrate with a simple example. For example, we often use the tab in the page, before we have to use the feet originally realized, YUI, jquery also have such plug-ins or modules, but now we use: Target pseudo class can be achieved.

HTML structure:

Label One
Label two
Label Three
# # # CSS3 Code:
/layout styles/. tab_content {position:absolute;/set content box as absolute//other layout styles/} #tab1: Target, #tab 2:target, #tab3: target {z-index:1;}

The principle must be understood by all, is to set the tab content box to absolute positioning, and then through: Target pseudo class to adjust its z-index.