1.:link add a style to a link that has not been visited: visited adds a style to the link that has been visited: hover adds a style to an element when the mouse hovers over it: AC tive add a style to the active element (clicked) when the above four pseudo-classes are applied to hyperlinks, the order cannot be changed to Hyperlinks:
<style>a:link{ color:red; } a:visited{ color:green; } a:hover{ color:blue; } a:active{ color:yellow; } </style>
<a href= "#" >pmx-cnblogs</a>
Div:
<style>div{ width:100px; height:100px; background-color:red; BORDER:3PX Solid blue; overflow:hidden; Transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s; line-height:100px; text-align:center;} div:hover{ background-color:green; width:300px; height:300px; line-height:300px; font-size:2em}div:active{ color:yellow;} </style>
<div>this is div</div>
Normal state:
What to look like when you move the mouse over the Div:
The left mouse button is pressed to look like:
2.:first-child P:first-child selects the P element as the first child element of an element, instead of selecting the first child element of the P element
<style> #myDiv > p:first-child{ background-color: #3C6; } </style><body> <p>p8</p> <div id= ' mydiv ' style= ' Width:300px;height:300px;o Verflow:auto ' > <p>p1</p> <p>p2</p> <p>p3</p> <div > <p>p4</p> <p>p5</p> </div> </div> <p>p6 </p> <p>p7</p></body>
P1 is selected as the first child element of a mydiv
3.: Focus adds a special style to the focused element, such as when the button is clicked and the text box enters text
<style>input:focus{ background-color:yellow; } </style><input type= ' text ' value= ""/>
4.: Lang adds a style to an element with the specified lang attribute
<style>:lang (zh) { color:red; } </style><p lang= "en" >p7</p>
The Pseudo-class of CSS