A ramble on CSS pseudo-class and pseudo-elements

As we all know, there are a lot of selectors in CSS, such as ID (#), Class (.), property [attr], which can meet some needs, but sometimes deficient. Pseudo-classes and pseudo-elements provide a useful supplement that allows us to encode more efficiently. Pseudo-classes and pseudo-elements are predefined, independent of document elements, and they are not obtained from the DOM, not based on the characteristics of the element itself (ID, class, attribute, etc.). They are obtained from the special State of the element, such as the sibling element of the element, the child element, the first character of the text element, and so on.

CSS pseudo-class: Unlike the normal DOM element style, it does not require any DOM content. Just a few elements of the decorated class are inserted, which are visible to the user, but not visible to the DOM. The style effects produced by pseudo-classes can also be implemented by adding a class. The pseudo-class selection element is based on the state that the current element is in, or the element's current attribute, or the environment in which it is located, rather than the static flags that the element itself has, such as the ID, class, attributes, and so on. When the state of an element changes, the style of the element defined by the pseudo-class also changes, which is different from the style defined by the ID (#), Class (.), and the property [attr] Selector. It can be seen that the function and class are somewhat similar, but it is based on the abstraction outside the document, so called Pseudo class.

First, UI element State pseudo-class

1.  e:hover is used to effect when the user moves the mouse over the element;
2.  e:active For the user to click on the effect of the element (which is happening at the point, release the left mouse button This action is completed);
3.  e:focus is used for elements as the focus, which is often used on form elements.
4.   e:enable  Specifies the style when the element is in the available state;   
5.  e:disable Specifies the style;      &NBSP When the element is in an unavailable state;
6.   e:read-only   Specifies the style when the element is in a read-only state;   
7.  e:read-write Specifies the style when the element is in a non-read-only state;

8.   e:checked   Specifies how the radio radio box or CheckBox check box in the form will look when it is selected (in FF:-moz-checked);   

9.   E:default   Specifies the style of the radio or CheckBox control that is in the selection state by default when the page is opened;   

10.   e:indeterminate   Specifies that when a page is open, if any one of the radio boxes in a set of radio boxes is not set to the selected state, the style of the entire set of radio boxes, if the user selects a single box, Then the style is canceled;   

11.   e::selection   Specifies the style when the element is selected.

Second, the structure pseudo-class

1. e:first-child Select the first child element of an element;
2. e:last-child Select the last child element of an element;
3. e:nth-child () selects one or more specific child elements of an element;
4. e:nth-last-child () selects one or more specific child elements of an element, starting from the last child element of the element;
5. e:nth-of-type () selects the specified element;
6. e:nth-last-of-type () selects the specified element, starting from the last of the element;
7. E:first-of-type Selects the first homogeneous sub-element under a superior element;
8. e:last-of-type Select the last homogeneous child element of a superior element;
9. e:only-child The selected element is the only element of its parent element;
10. e:only-of-type Select an element that is the only child of its ancestor element of the same type;
11. There is no content in the element selected by E:empty .

Four, negative selector

1. E:not () allows you to locate elements that do not match the selector.

A css pseudo-element is similar to a pseudo-class, and it can be used to select parts of an element that may not be included in <div> or <span> and are not easily chosen in other ways. For example, the First-letter pseudo-element can be used to select the first character of the text in an element so that some effects can be created.

The CSS pseudo-elements are:

1. E:first-letter A pseudo-element adds a special style to the first letter of the text;
2. e:first-line Pseudo-elements add special styles to the first line of text;
3. E:before A pseudo-element to add content before the element;
4. e:after Pseudo-elements add content after the element.

Then in the CSS3, but also on the pseudo-elements of a certain adjustment, on the basis of a previous increase of a ":" That is now turned into ::first-letter,::first-line,::before,::after。 another he also added a ::selection , ::selection to change the browser to select the Chinese default effect.

A ramble on CSS pseudo-class and pseudo-elements