What pseudo-classes are added to html5/css3

The new pseudo-classes are: ":first-child", ":last-child", ":nth-child(n)", ":link", ":visited", ":active" ”, “:hover”, “:focus”, “:not()”, etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Structural pseudo-class selector

:first-child The first child node, :last-child The last child node, :nth-child(n) The nth child Node, :nth-last-child(n) The nth child node from the last, :only-child The only child node

:nth-child(n), :nth-last-child(n) and Some special usages limit the selection through things in brackets:

1. odd/event: the odd/even element

2. xn y: the xn y element

Without further ado, let’s talk about the code. The following is to set the pseudo-class selector for the li tag

     
  
 
oaaaaaaaaaaa
 
obbbbbbbbbbb
 
occccccccccc
 
odddddddddd
 
oeeeee
 
saaaaaa啊飒飒
 
  

You can see the difference Effect

UI element status pseudo-class selector

:link (element before being visited (usually only a hyperlink)), :visited(has been visited element (usually only a hyperlink), :active (the element being accessed is between the mouse click and release (usually only a hyperlink)), :hover (the element in the mouse hover state), :focus (Element that has received focus)

     
  aaa 
 文本框:  
  

It started like this

When we click on the hyperlink

After clicking

#Next look at the text box. When we put the focus on the text box (that is, the input of the text box status), get: the style in focus

## Look at the button again, when the mouse hovers over the button, get: the style in hover (because the author wants to take a screenshot, one The cursor cannot be captured when taking a screenshot, so the cursor cannot be seen in the picture)

: The not() pseudo-class selector is equivalent to the subtraction of two selectors. , such as li:not(#a){} modifies all element blocks that match the li selector but do not match the id of a

Recommended learning:

css video tutorial

The above is the detailed content of What pseudo-classes are added to html5/css3. For more information, please follow other related articles on the PHP Chinese website!