CSS Summary 12:css Pseudo-Class (pseudo-classes)

1 Pseudo-class effect : CSS pseudo-class is a special effect used to add some selectors.

2 Common examples:2.1anchor Pseudo-class: code:

Normal syntax:

< Span class= "hl-reserved" > < Span class= "hl-comment" >a{color: #FF0000 ;} /*  text color  */

Pseudo-Class syntax:

A: Link {color:#FF0000;} / * non-visited links * /

< Span class= "hl-comment" >a:visited {color: #00FF00 ;} /* visited link */

< Span class= "hl-reserved" > a:hover {color: #FF00FF ;} /* mouse over link */

< Span class= "hl-reserved" > a:active {color: #0000FF ;} /* selected links */

< Span class= "hl-brackets" > < Span class= "hl-comment" > Note: in the CSS definition, a:hover must be placed after A:link and a:visited to be valid.   in the CSS definition, a:active must be placed after a:hover to be valid. The name of the pseudo-class is not case-sensitive.

2,2 CSS-: first-child pseudo-Class

You can use the: First-child pseudo-class to select the first child element of an element

Note: Prior versions of IE8 must be declared <! Doctype>, this way: First-child can take effect

Example 1: matches the first <p> element: the first label of the P tag is blue.

P: first-child {

color:blue;

}

Example 2: The text in the first label I within the label I within the P tag is blue

p > I: First-child < Span class= "Hl-code" >{

color:blue

}

CSS Summary 12:css Pseudo-Class (pseudo-classes)