Pseudo Class Selector
Even more interesting is pseudo-class selectors, why it is called pseudo-class selectors, which allows to label (label of a particular state) html there is no set style, for example, we give a mouse html tag element of the rolled-over state set font color:
a:hover{color:red;}
<a href="address"> word </a> Address Labels
The previous line is provided to a red font color label a rollover state. This will make the first paragraph of text in the "timid" text added to mouse over the font color to red effects.
The pseudo selectors:
About pseudo-class selectors, so far, is compatible with all browsers "pseudo-class selectors," is to use on a label: hover (in fact, there are many pseudo-class selectors, in particular, css3, but because they can not be compatible with all browser, the tutorial just say this one of the most commonly used). In fact,: hover can be placed on any label, for example, p: hover, but their compatibility is very good, so now is a more commonly used: the combination hover.
Example:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>伪类选择符</title> <style type="text/css"> a:hover{ color:red; font-size:20px; } </style> </head> <body> h1<> Courage </ h1 > < the p- class = "First" > third grade, I was a < A href = "http://www.imooc.com" > timid as a mouse </ A > little girl in class never afraid to answer the questions posed by the teacher, for fear the wrong answer teacher will criticize me. He has not the courage to answer the questions posed by the teacher. Activities organized by the school I have not the courage to participate. </ The p- > < the p- the above mentioned id = "SECOND," > when the third grade to the next semester, our class of an open class, the teacher raised a very < span > simple </ span > question, many students give class hands, and even worse grades than I, but also a show of hands, but also said:. "I come, I come." I looked around, I did not raise it. </ P > <="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html>