CSS pseudo-classes

First, a golden rule:

The effect of a pseudo-class can be achieved by adding an actual class, and the effect of the pseudo-element can be achieved by adding an actual element.

The first part, pseudo-classes, Pseudo-class

First, Link department

(This should be the most familiar.) ）

a:link--not visited links

a:visited--links that have been visited

a:hover-the style when the mouse hovers over the link

a:active--style when mouse clicks on link

When the above 4 pseudo-classes are applied to the <a> element at the same time, considering the cascading relationships of the styles, it is necessary to follow the order of LoVeHA , otherwise it is prone to problems.

Second, form system

Input: Focus-Specifies the style of the focus element; In short, it is the place where the mouse cursor flashes, often used in the form's input box.

Input:d isabled--Specifies the style of the <input> element with the disabled attribute

Input: Enabled--Specifies the style of the <input> element with the Enabled property

Input: Checked--Specifies the style of the <input> element with the checked attribute

Input: Required--Specifies the style of the <input> element with the required attribute

Input: optional--Specifies the style of the <input> element without the required attribute

Input: Valid--Specifies the style of the <input> element with valid values

Input: Invalid--Specifies the style of the <input> element with invalid values

Input: read-only--Specifies the style of the <input> element with the ReadOnly attribute

Input: Read-write--Specifies the style of the <input> element without the ReadOnly attribute

Input: In-range-If the minimum and maximum values (type= "number"/type= "range") are specified in an input box, the style is applied when the input value is within the specified range

Input: Out-of-range--xxxxxx, when the value entered exceeds the specified range, the style is applied.

Third, the interaction system

: Hover--can theoretically be used for all elements, such as #header:hover, which means that the specified style is applied when the user's mouse hovers over an element with an ID value of header.

: Active-can theoretically be used for all elements, such as #header:active, which means that the specified style is applied when the user clicks on an element with the ID value of the header.

: Focus--in theory, can be used for all elements that can be focused, more on form elements such as <input>, <textarea>, and so on.

Focus, popular understanding, mouse click, will appear the cursor (flashing).

Iv. Digital System

Front high energy, ready paper and pen ...

: First-child

For example, P:first-child, the first step, in any element, find the first child element, the second step, the child element is not a P element, if it is, select it (if not, skip), and then look for the next.

: Last-child

Look for the last child element, as in the previous step.

: Nth-child ()

This pseudo-class can (must) specify parameters, with P:nth-child () For example, in the following ways.

Tip: In the parameter expression, n is calculated from 0.

1. When the parameter is a specific number, such as 3,p:nth-child (3); The first step, in any element, is to find its 3rd child element; The second step, the child element is not a P element.

When the parameter is 1, that is: Nth-child (1), equivalent to: First-child.

There is a picture of the truth:

The CSS is as follows:

1 P:nth-child (3) {2    color:orange; 3 }

Page effect:

First Picture:

The second picture:

Everything is not in the words ...

2. When the parameter is 2n, then select all the even sub-elements, equal to even , when the parameter is 2n+1 or 2n-1, then select all the odd elements, equal to the odd; this is often used when making zebra tables.

3. When the parameter is a multiple of n, such as 3n, this is good understanding.

4. When the parameter is n+ specific number, such as n+3, is to look backwards from the 3rd sub-element, since n starts at 0, then the value of this expression is 3, 3, 4, 5 ... This way.

5. When the parameter is-n+ specific number, such as-n+3, is to look forward from the 3rd child element, because n starts from 0, then the value of this expression is starting from 3, then 2, 1 ... This way.

6. When the parameters for a specific number *n+1, such as 3n+1, indicating starting from 1, 3 Select one.

In practice, you can create your own expression according to your needs and play it yourself.

Remember the two steps, the nth is found, but also to see the element type is right.

: Nth-last-child

The parameters that are accepted are the same as: Nth-child (), except that this is the upside-down number.

: Nth-of-type ()

Accept parameters, same as parameter type.

For example P:nth-of-type (3), first find all the P elements, and then find the 3rd P element, to apply the style to it.

There is a picture of the truth, please see below:

CSS code:

1 H1:nth-of-type (2) {2    color:blue; 3 }45P:nth-of-type (3) {6    color:orange; 7 }

Below:

Remember two steps, first find the element type, then find the nth one.

: First-of-type--slightly

: Last-of-type--slightly

: Only-child

For example, P:only-child, which indicates that there is only one child element in the parent element, and that the child element must also be a P element.

: Only-of-type

For example, P:only-of-type, which indicates that there are several child elements in the parent element is OK, but the P element can only have one.

: Empty

For example, P:empty, which indicates that if there is a completely empty (not even a space) p element, select it.

In two steps, find the completely empty element and see if it is the P element.

Small discovery:

If the HTML is such a,<p> </p>, there is a space in the middle, on the page is not the position of this p element;

If HTML is like this, <p>&nbsp;</p> In the middle there is a &nbsp; , a blank line appears on the page.

Amount But I don't know what the difference is. ）

CSS pseudo-classes