This article brings to you the content is about the CSS pseudo-class selector and pseudo-element selector introduction (with code), there is a certain reference value, the need for friends can refer to, I hope you have some help.
First, link pseudo-class
1. Link pseudo-Class
/* Link pseudo-class * /Note: Link,:visited,:target is acting on the link element! : Link represents all anchors as hyperlinks and points to an unreachable address : Visited represents all anchors as hyperlinks and points to an visited address : Target represents a special element, Its ID is the fragment identifier of the URI
2, code example:
01_ Anchor-point pseudo-class. html
02_ Anchor-point pseudo-class. html
03_target.html
Second, dynamic Pseudo-class
1. Dynamic Pseudo-Class
/* Dynamic Pseudo class * /Note: Hover,:active can be used for all elements! : Hover is suspended to the element : active means matching elements that are activated by the user (click and hold) Note: Because of the A tag: link and: Visited can override all a-label status, so when: link,: Visited,:hover,:active at the same time on a label body: Link and: Visited can not put in the last!!!
2, code example:
Third, privacy and: visited selector
1, privacy and: visited selector
/* Privacy with: visited selector * * Only the following properties can be applied to the visited link: color background-color border-color
Iv. Forms related pseudo-class
1. Form related Pseudo-class
/* Form related pseudo-class * /: Enabled matches an editable form :d isable matches a disabled form : Checked matches the selected form : Focus Match a form that has been burnt
2, code example:
01_ form status. html
02_ form status. html
03_ gets the focus. html
04_ analog Radio box. HTML
Iv. Structural pseudo-class
1. Structural pseudo-Class
/* Structural pseudo-class */index values starting from 1!!!! Index can be a variable n (only n) index can be even odd #wrap ele:nth-child (index) to indicate that the child element of index in the #wrap must be ele #wrap Ele:nth-of-type (index) that matches the Ele child element of index #wrap in addition: Nth-child and: Nth-of-type There is a very important difference!! Nth-of-type with elements as the center!!! : Nth-child (Index) series : First-child : Last-child : Nth-last-child (Index) : Only-child (equivalent to: First-child:last-child or: Nth-child (1): Nth-last-child (1)): Nth-of-type (Index) series : First-of-type : Last-of-type : Nth-last-type (Index) : Only-of-type (equivalent to: First-of-type:last-of-type or: Nth-of-type ( 1): Nth-last-of-type (1): not: Empty (the content must be empty, there is no space, there is attr OK)
2, code example:
04_not.html
05_empty.html
Five, pseudo-elements
1. Pseudo-Elements
/* Pseudo element * /:: After :: Before :: Firstletter :: Firstline :: Selection
2, code example:
After.html
Before.html
Firstletter.html
Firstline.html
Selection.html