Deep understanding of CSS pseudo classes and deep understanding of css pseudo

Deep understanding of CSS pseudo classes and deep understanding of css pseudo
* Directory [1] ANCHOR [2] UI element [3] structure pseudo class [4] Other prefix

Pseudo classes are often confused with pseudo elements. The effect of pseudo elements is similar to that of adding an actual element. The effect of pseudo elements is similar to that of adding an actual class. In fact, to distinguish the two, css3 has clearly defined that a pseudo class is represented by a colon, while a pseudo element is represented by two colons. This article introduces the details of pseudo classes in detail.

 

Anchor

The anchor <a> has five common pseudo classes: link, hover, active, focus, and visited.

A: link {background-color: pink;}/* pinghong, not accessed */

A: hover {background-color: lightblue;}/* light blue, hover over the mouse */

A: active {background-color: lightgreen;}/* light green, being clicked */

A: focus {background-color: lightgrey;}/* light gray, with focus */

A: visited {color: orange;}/* The font color is orange and has been accessed * // * [note] the visited pseudo class can only set the style of the font color */

Pseudo-class Sequence

For pseudo-class sequence, there is a saying that love-hate represents the pseudo-class sequence: link, visited, focus, hover, and active. But does the pseudo-class order have to be like this? Why is this order?

A rule in CSS cascade is very important, that is, to overwrite the front, so the order of pseudo classes needs to be carefully considered.

[1] link and visited must be at the beginning, and there is no sequence. Otherwise, the effect of link or visited will be overwritten.

[Note] link and visited are static pseudo classes and can only be used for hyperlinks.

[2] The hover, active, and focus pseudo classes must be in the order of focus, hover, and active, because hover and active need to be triggered in the focus state, to trigger active, you must first trigger hover, so active must be placed behind hover.

[Note] hover, active, and focus are called dynamic pseudo classes and can be applied to any element. However, IE7-browser does not support: focus,: hover, and: active only supports setting for <a> in IE6-Browser

There are only two final order: link, visited, focus, hover, active or visited, link, focus, hover, and active.

A: link {background-color: pink;}/* red, not accessed */a: visited {color: orange;}/* The font color is orange, accessed */a: focus {background-color: lightgrey;}/* light gray, with focus */a: hover {background-color: lightblue;}/* light blue, hover the mouse over */a: active {background-color: lightgreen;}/* light green, being clicked */

 

UI element pseudo-class

The UI element pseudo-classes include: enabled,: disabled, and: checked. They are mainly used for form elements in HTML and are not supported by IE8-browser.

: Enabled available status: disabled unavailable status: checked selected status

input:enabled{    border: 1px solid black;    background-color: transparent;}input:disabled{    border: none;    background-color: gray;}input:checked{    outline: 2px solid lightblue;}

<Button onclick = "btn. disabled = false;"> buttons available </button>
<Button onclick = "btn. disabled = true;"> the button is unavailable. </button>
<Input type = "button" id = "btn" value = "button">
<Br> <label> Male <input type = "radio" name = "sex"/> </label>
<Label> Female <input type = "radio" name = "sex"/> </label>

[Note] There cannot be spaces between input and: and enabled.

Structure pseudo class

Structure pseudo-classes can be divided into the following three situations: IE8-not supported by browsers

// In the following cases, E is the parent element and F is the child element.

[1]: nth-child (n),: nth-last-child (n), first-child, last-child,: only-child

E f: nth-child (n) Select the nth child element e f: nth-last-child (n) of the parent element select the nth child element e f: the first child element of the first-child parent element, which is equivalent to e f: nth-child (1) to the last child element of the e f: last-child parent element, and e f: nth-last-child (1) is equivalent to e f: only-child. Select a parent element that contains only one child element.

[Note]: firsr-child and: last-child are not supported only by IE6-browser.

N can be an integer (starting from 1), a formula, or a keyword (even, odd)

P: first-child represents not the first child element of <p>, but <p> element is the first child element of an element, p> I: first-child matches all <I> elements in <p> elements <I> p: first-child I matches all <I> elements in <p> elements that act as the first child element.

li:nth-child(odd){color: red;} li:nth-last-child(3){color: green;}li:first-child{color: blue;}li:last-child{color: yellow;}div:only-child{background-color:lightgrey;}

<Ul> <li> <div> first DIV </div> </li> <div> second DIV </div> </li> <li> <div> third DIV </div> </li> <div> fourth DIV </div> </li> <div> fifth DIV </div> </li> <div> sixth DIV </div> </li> </ul>

[2]: nth-of-type (n),: nth-last-of-type (n),: first-of-type,: last-of-type ,: only-of-type

E f: nth-of-type (n) Select the nth child element of the parent element with the specified type e f: nth-last-of-type (n) select the nth child element of the parent element with the specified type, e f: first-of-type select the 1st child elements with the specified type in the parent element, and e f: nth-of-type (1) Same e f: last-of-type select the last child element with the specified type in the parent element, with e f: nth-last-of-type (1) Same e f: only-of-type select a parent element that contains only one child element of the same type

.box div:nth-of-type(even){color: red;} .box p:nth-last-of-type(3){color: green;}.box div:first-of-type{color: blue;}.box p:last-of-type{color: yellow;}.box div:only-of-type{color: pink;}

<Div class = "box"> <div> first div </div> <p> first p </p> <div> second div </div> <p> Second p </p> <div class = "in"> third div </div> <p> third p </p> </div> <div class = "box"> <div> fourth div </div>

[3]: root,: not,: empty,: target

: Root selects the root element of the document, that is, 
[Note]: The not selector is only supported by the safari9 + and ios9.2 + browsers.
:root{color:red;}div:not{background-color: lightgrey;}p:empty{height:30px;width:30px;background:pink;}:target{color:blue;}
<Body> <a href = "# test"> test </a> <div> the first div </div> <p> the first p </p> <div id = "test"> second div </div> <p> Second p </p> </body>

 
Others
[1]: lang () matches a language. IE7-not supported by the browser
P: <p>
[2] not only can a single pseudo class be used, but also can be used in combination with a pseudo class
[Note] Order independence
div:hover:first-child{background-color: lightgreen;}div:last-of-type:active{background-color: lightblue;}    
<Div> first div </div> <div> second div </div>