CSS Pseudo-classes, csspseudo-classes

CSS Pseudo-classes, csspseudo-classes

Here is a golden rule:

The pseudo-class effect can be achieved by adding an actual class; the pseudo-element effect can be achieved by adding an actual element.

 

Part 1: Pseudo-classes

 

I. Link System

(This should be the most familiar one .)

A: link-- Unaccessed Link

A: visited-- Accessed Link

A: hover-- Style when the mouse is hovering over the link

A: active-- Style when the mouse clicks the link

When the above four pseudo classes are applied to <a> elements at the same time, considering the stacked relationship of the style, they must follow the order of LoVeHA; otherwise, problems may occur.

 

Ii. Form System

Input: Focus-- Specifies the style of the Focus element. In short, it is the place where the mouse and cursor are flashing and is often used in the input box of the form.

Input: Disabled-- Specify the style of the <input> element with the disabled attribute

Input: Enabled-- Specify the style of the <input> element with the enabled attribute

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

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

Input: OptionaL -- specify the style of the <input> element without the required attribute

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

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

Input: Read-only-- Specify the style of the <input> element with the readonly attribute

Input: Read-write-- Specify 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 input value exceeds the specified range, the style is applied.

 

Iii. Interaction System

: Hover-- Theoretically, it can be used for all elements, such as # header: hover, which means that the specified style is applied when the user clicks the element whose id value is header.

: Active-- Theoretically, it can be used for all elements, such as # header: active, which means that the specified style is applied when the user clicks the element whose id value is header.

: Focus-- Theoretically, it can be used for all focused elements, mostly for form elements, such as <input> and <textarea>.

Focus-oriented, easy to understand. If you click it, the cursor will pop up ).

 

Iv. Digital System

High energy ahead, prepare paper and pen...

 

: First-child

For example, p: first-child. Step 1: Find the first child element in any element. Step 2: whether the child element is a p element. If yes, select it (if not, skip it) and search for the next one.

 

: Last-child

Find the last child element. The steps are the same as above.

 

: Nth-child ()

This pseudo-class can (must) Specify the parameter, take p: nth-child () as an example, there are several methods.

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); Step 1, find its 3rd child element in any element; Step 2, is this child element p.

When the parameter is 1, that is, nth-child (1), is equivalent to: first-child.

The truth can be found only when there is a picture:

CSS:

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

Page effect:

The first image:

The second figure:

 

 

All in all words...

 

2. if the parameter is 2n, all the even subelements are selected, which is equivalent to even. If the parameter is 2n + 1 or 2n-1, all the odd subelements are selected, which is equivalent to odd; this is often used when creating a zebra chart.

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

4. when the parameter is n +, a specific number, such as n + 3, indicates finding the number from the end of the 3rd child element. Because n starts from 0, the value of this expression starts from 3, 3, 4, 5... This way.

5. if the parameter is a specific number of-n +, for example,-n + 3, it indicates that the number is searched forward from the first sub-element. Because n starts from 0, the value of this expression starts from 3, then 2, 1... This way.

6. When the parameter is a specific number * n + 1, for example, 3n + 1, it indicates starting from 1 and selecting one from 3.

In practice, you can create your own expressions as needed.

Remember two steps. After n is found, check whether the element type is correct.

 

: Nth-last-child

The accepted parameter is the same as that of nth-child (), but this parameter must be in reverse order.

 

: Nth-of-type ()

Accept parameters. The parameter type is the same as above.

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

See the following picture for details:

CSS code:

1 h1:nth-of-type(2) {2     color:blue;3 }4 5 p:nth-of-type(3) {6     color:orange;7 }

Below:

 

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

 

: First-of-type-- Omitted

: Last-of-type-- Omitted

 

: Only-child

For example, p: only-child indicates that the parent element has only one child element, and the child element must also be a p element.

 

: Only-of-type

For example, p: only-of-type indicates that it does not matter if there are several child elements in the parent element, but only one of the p elements can exist.

 

: Empty

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

In two steps, first find the completely empty element and then see if it is a p element.

 

Minor discoveries:

If html is like this, <p> </p>, there is a space in the middle, and there is no position for this p element on the page;

If html is like this, <p> & nbsp; </p>, there is an & nbsp; in the middle, a blank line is displayed on the page.

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

 

V. Others

: Root -- select the root element of the document. In html documents, the

: Not () -- negative selector, for example: not (p), select all non-<p> elements.

: Target -- the language is scarce and does not have a table for the time being; a magic pseudo class.