Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the difference between pseudo-classes and pseudo-elements in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Pseudo classes are used to select information outside the DOM tree, or information that cannot be represented by a simple selector. The former contains elements that match the specified state, such as visited,:active;, and the latter contains elements from DOM trees that meet certain logical conditions, such as first-child,:first-of-type,:target.

(equivalent to a special class selector to add some special effects)

Pseudo elements are virtual elements that are not defined in the DOM tree. Unlike other selectors, it does not take the element as the minimum selection unit, it selects the content specified by the element. For example:: before indicates the content before the content of the selected element, that is, ";;: selection indicates the selected content of the selected element.

(equivalent to a special element (p, span), which can be used to store some special styles or content.

In CSS3, pseudo-classes are also syntactically different from pseudo-elements, which are modified to start with::. However, for historical reasons, browsers also continue to support pseudo elements that start with:, but it is recommended that the specification start with::.

Pseudo class

Selector Meaning CSS

: active selects element 1 that is being activated

: hover select element 1 suspended by the mouse

: link selects element 1 that is not accessed

: visited selects element 1 that has been accessed

: first-child selects element 2 that satisfies the first child of its parent element

: lang selects element 2 with the specified lang attribute

Focus selects element 2 that has keyboard input focus

: enable selects each started element 3

: disable selects each prohibited element 3

: checked selects each selected element 3

: target selects the current anchor element 3

: first-of-type selects element 3 that satisfies the first type child of its parent element

: last-of-type selects element 3 that satisfies the last type child of its parent element

: only-of-type selects element 3 that satisfies the only child element of a certain type that is its parent

: nth-of-type (n) Select element 3 that satisfies the nth child element of a certain type that is its parent

: nth-last-of-type (n) Select the element 3 of some type that satisfies the last but one of its parent element

: only-child selects element 3 that satisfies the only child of its parent element

: last-child selects element 3 that satisfies the last element of its parent element

: nth-child (n) Select element 3 that satisfies the nth child of its parent element

: nth-last-child (n) Select element 3 that satisfies the penultimate child of its parent element

: empty selects element 3 that satisfies no child elements

: in-range selects element 3 with a satisfaction value within the specified range

: out-of-range Select element 3 whose value is not within the specified range

: invalid selects element 3 whose satisfaction value is invalid

Valid selects element 3 whose satisfaction value is a valid value

: not (selector) Select element 3 that does not meet selector

: optional selects form elements that are optional, that is, there is no "required" attribute 3

Read-only selects form element 3 with "readonly"

Read-write selects form element 3 without "readonly"

: root select root element 3

Pseudo element

Selector Meaning CSS

:: first-letter selects the first word 1 of the specified element

:: first-line selects the first line 1 of the specified element

:: after inserts content 2 before the content of the specified element

:: before inserts content 2 after the content of the specified element

:: selection selects the content 3 selected by the user in the specified element

The difference between: before and:: before

The two methods are equivalent, and both represent pseudo elements.

: before is the writing of CSS2, and:: before is the writing of CSS3.

The compatibility of before is better than that of:: before, but it is recommended to use:: before in H5 development

Note:

Pseudo elements should be used with the content attribute

Pseudo elements do not appear in DOM, so they cannot be manipulated through js, just adding them to the CSS render layer

The special effects of pseudo elements are usually activated using the hover pseudo class style.

.test: hover::before {/ * then animation and transition take effect * /}

This is the end of the content of "what is the difference between pseudo-classes and pseudo-elements in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.