CSS pseudo-Class

Pseudo-classes are often confused with pseudo-elements, which are similar in effect to the fact that they are achieved by adding an actual element, and the pseudo-class effect is similar to that achieved by adding an actual class. In fact CSS3 to differentiate between the two, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons. This article will detail the details of the pseudo-class

Anchor Point

About the anchor point <a> there are 5 common pseudo-classes, respectively: link,:hover,:active,:focus,:visited

A:link{background-color:pink;} /* Magenta, not visited */

A:hover{background-color:lightblue;} /* light blue, mouse hover */

A:active{background-color:lightgreen;} /* Light green, is being clicked */

A:focus{background-color:lightgrey;} /* light gray, with focus */

A:visited{color:orange;} /* The font color is orange and has been accessed *//*[note]visited pseudo-class can only set the font color, border color, outline color style */

Pseudo-Class Order

For pseudo-Class order, there is a love-hate, which represents the order of the pseudo-class is link, visited, focus, hover, active. But is it possible that the order of pseudo-classes can only be so? Why is this order?

It is important to have a rule in the CSS cascade, which is to overwrite the front, so the order of the pseudo-class needs to be carefully considered.

"1" link and visited must be in the front, and there is no order, otherwise the effect of link or visited will be overwritten

[Note that]link and visited are called static pseudo-classes and can only be applied to hyperlinks

"2" hover, active, focus these three pseudo-classes must be the focus, hover, active order, because in the focus state, also need to trigger hover and active, and to trigger active must first trigger hover, So the active is going to be behind hover.

[Note that]hover, active, and focus are called dynamic pseudo-classes and can be applied to any element, but Ie7-browser does not support: Focus,:hover and: Active is only supported for <a> settings under ie6-browser

So there are only two final sequences: link, visited, focus, hover, active or visited, link, focus, hover, active

A:link{background-color:pink;} /* Magenta, no access to */a:visited{color:orange;} /* The font color is orange and has been accessed */a:focus{background-color:lightgrey;} /* light gray, with focus */a:hover{background-color:lightblue;} /* light blue, hover */a:active{background-color:lightgreen;} /* Light green, is being clicked */

UI element Pseudo-class

UI element Pseudo-class includes: Enabled,:d isabled,: Checked three, mainly for the form element in HTML, ie8-browser does not support

: Enabled status: Disabled not Available status: Checked selected state

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

input:enabled{border:1px solid black; Background-color:transparent;}    input:disabled{Border:none; Background-color:gray;} input:checked{outline:2px solid LightBlue;}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Button available button unavailable male Female

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

[Note that there can be no spaces between]input and enabled

Structure Pseudo-Class

Structure pseudo-class can be divided into the following 3 cases, ie8-Browser does not support

The following are the cases where E is the parent element and F is the child element

"1": Nth-child (N),: Nth-last-child (N), First-child, Last-child,: Only-child

e f:nth-child (n) Select the nth child element e F:nth-last-child (n) of the parent element to select the first child element of the parent element's reciprocal nth child element e F:first-child, and E F : Nth-child (1) equals e f:last-child The last child element of the parent element, and E F:nth-last-child (1) is the same as E F:only-child select the parent element to contain only one child element

[Note]:first-child and: Last-child only ie6-browser does not support

n can be an integer (starting at 1), or it can be a formula, or it can be a keyword (even, odd)

P:first-child represents not the first child element of <p>, but the <p> element is the first child of an element p > i:first-child matches the first <i> element in all <p> elements P:first-child I matches all <i> elements in the <p> element as the first child element

Li:nth-child (odd) {color:red;} li:nth-last-child (3) {Color:green;} Li:first-child{color:blue;} Li:last-child{color:yellow;} Div:only-child{background-color:lightgrey;}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<ul> <li><div> First div</div></li> <li><div> second div</div></li> <li><div> a third div</div></li> <li><div> fourth div</div></li> <li> <div> Fifth div</div></li> <li><div> sixth div</div></li> </ul>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

"2": Nth-of-type (N),: Nth-last-of-type (N),: First-of-type,: Last-of-type,: Only-of-type

. Box Div:nth-of-type (even) {color:red;}. Box P:nth-last-of-type (3) {Color:green;}. Box Div:first-of-type{color:blue;}. Box P:last-of-type{color:yellow;}. Box Div:only-of-type{color:pink;}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<div class= "box" > <div> first div</div> <p> first p</p> <div> second div</div> &L t;p> second p</p> <div class= "in" > Third div</div> <p> third P</p></div><div class= " Box "> <div> Fourth div</div></div>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

"3": root,: not,: empty,: Target

: root selects the root element of the document: not selects all elements except an element: empty selects an element that has no child elements, and the element does not contain any text nodes: target elements corresponding to the targets matching anchor points

[Note that the]:not selector is commonly used for vertical line processing between navigation, such as Li:not (: Last-of-type)

: root{color:red;} Div:not{background-color:lightgrey;} P:empty{height:30px;width:30px;background:pink;}:target{color:blue;}

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

<body> <a href= "#test" > Test </a> <div> First div</div> <p> first p</p> <div id= "Test" > Second div</div> <p> second p</p> <p></p> </body>

650) this.width=650; "src="/img/fz.gif "alt=" Copy Code "style=" Margin:0px;float:left;border:none; "/>

Other

"1": lang () matches a language, ie7-browser does not support

P:lang (en) matching language "en" <p>

"2" can be used in combination with a single pseudo-class or pseudo-class

[Note] Order Independent

Div:hover:first-child{background-color:lightgreen;} Div:last-of-type:active{background-color:lightblue;}

<div> first div</div> <div> second div</div>

CSS pseudo-Class