Code Analysis of Pseudo-class selectors and pseudo-element selectors in CSS

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