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

In this article, the editor introduces in detail the "css3 pseudo-classes and pseudo-elements", with detailed content, clear steps and proper handling of details. I hope this "css3 pseudo-classes and pseudo-elements" article can help you solve your doubts.

In css3, a pseudo-class is a selector for adding styles to existing elements when they are in a certain state, which changes dynamically according to user behavior, while pseudo-elements, which mean "fake elements" or "camouflage elements", are selectors used to create elements that are not in the DOM tree and add styles to them.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

What is a pseudo class?

Pseudo-class is a kind of selector for adding corresponding style to an existing element when it is in a certain state (slide, click, etc.), and this state changes dynamically according to the user's behavior.

For example, when a user hovers over a specified element, the state of this element can be described by: hover. Although it is similar to general css and can add styles to existing elements, it can add styles to elements only when it is in a state that the DOM tree cannot describe, so it is called pseudo-class.

What are pseudo elements?

Pseudo-element literally means "false element" or "camouflage element". In fact, it can also be understood that pseudo elements are actually virtual elements, elements that do not exist (code form), you do not find them in the document, so pseudo elements are virtual elements.

Pseudo elements are selectors for creating elements that are not in the DOM tree and adding styles to them.

With pseudo elements, you can define styles for specific parts of the selected element without the help of the ID or class attributes of the element. For example, with pseudo elements, you can style the first letter in a paragraph, or insert something before or after the element, and so on.

The difference between pseudo-classes and pseudo-elements:

Look at the following example:

Example 1:

First column, second column.

If we want to add styles to the first column, we can do this in two ways:

(1) add a class to the first column and define the style in the class:

First column, second column. First-item {color:orange;}

(2) if we do not need to add a class method, we can add a style to it by setting the first: first-child pseudo-class. At this time, the modified li still exists in the DOM tree.

The first and second li:first-child {color:orage;}

Example 2:

Hello World, and wish you have a good day!

To style the first letter of the paragraph, you can do the following:

(1) wrap the element in the first letter and style the span:

Hello World, and wish you have a good day!

.first {color:red;}

(2) if we do not create an element, we can give it to the

Element sets the P:first-letter pseudo element to add a style to it, which looks like creating a virtual span element and adding a style to it, but in fact this span element does not exist in the DOM number

Hello World, and wish you have a good day!

P:first-letter {color:red;}

From the above example, we can see that the operation object of the pseudo class is an existing element in the document tree, while the pseudo element creates an element outside the document tree. Therefore, the difference between pseudo-classes and pseudo-elements is whether or not an element other than a document tree is created.

Do pseudo elements use single colons or double colons?

The css3 specification requires that pseudo-elements be represented by double colons (::) to distinguish pseudo-classes from pseudo-elements. Pseudo-elements such as:: before and:: after use double colons (::), and: hover and: active pseudo-classes use single colons (:). With the exception of some browsers earlier than the IE8 version, most browsers support the double colon (::) representation of pseudo elements.

However, except for a few pseudo elements such as:: backdrop must use double colons (::), most pseudo elements support single colons and double colons, such as:: after, written as: after can work as well.

According to the W3C standard, although the CSS3 standard requires pseudo elements to be written in double colons, they still support single colons. For backward compatibility, we recommend that you still use single colons at present.

The common pseudo classes are:

: active selects the element being activated (matches the specified state)

: hover selects the element hovering by the mouse (matches the specified state)

: link selects elements that are not accessed (matches the specified state)

: visited selects the element that has been accessed (matches the specified state)

First-child selects an element that satisfies the first child of its parent element

: lang (value) Select the element with the specified lang attribute

Focus selects elements that have keyboard input focus

: enable selects each started element

Disable selects each prohibited element

: checked selects each selected element

: target selects the current anchor element

First-of-type selects an element that satisfies the first type of child element of its parent element

Last-of-type selects an element that satisfies the last type of child element of its parent

: only-of-type selects an element that satisfies the only child element of a certain type of parent element

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

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

Only-child selects an element that satisfies the only child of its parent element

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

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

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

Empty selects elements that satisfy elements that have no child elements

In-range selects elements with satisfactory values within the specified range

: out-of-range selects elements whose values are not within the specified range

Invalid selects elements whose satisfaction values are invalid values

Valid selects elements whose satisfaction values are valid values

: not (selector) Select elements that do not meet selector

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

Read-only selects a form element with "readonly"

: read-write selects form elements that do not have "readonly"

: root select root element

Common pseudo elements

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

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

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

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

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

After reading this, the article "what are the pseudo-classes and pseudo-elements of css3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.