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

This article mainly explains "what are the differences between pseudo-classes and pseudo-elements of css3", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "what are the differences between css3 pseudo-classes and pseudo-elements"!

Differences: 1. Pseudo-classes are used to add corresponding styles to existing elements when they are in a certain state, while pseudo-elements are used to create elements that are not in the DOM tree and add styles to them;2. Pseudo-elements will create elements outside the document tree, while pseudo-classes will not;3. Pseudo-elements are represented by double colons "::", while pseudo-classes are represented by single colons ":".

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

What are pseudo-classes and pseudo-elements?

Mention the word "false," what do you think of? "False,""Wang Jingwei pseudo-government,""non-existent"...

Pseudo-class: Used to add a style to an existing element when it is in a certain state (sliding, clicking, etc.), which changes dynamically according to user behavior. My understanding is that: itself does not exist, only in certain circumstances (sliding, clicking) will be triggered state, you can use css to modify the object in this state. For example, when the user hovers over a specified element, you can describe the state of the element by:hover. Although it is similar to a normal CSS, it can add styles to existing elements, but it can only add styles to elements when it is in a state that the DOM tree cannot describe, so it is called a pseudo-class.

Pseudo-elements: Used to create and style elements that are not in the DOM tree. For example, we can add some text before an element with:before and style the text, although the user can see the text, but it is not actually in the DOM document.

Difference between pseudo-classes and pseudo-elements:

Consider the following example:

Example 1:

First column, second column.

If we want to add style to the first column, we can do it in two ways:

(1) Add a class to the first column and define styles in that class:

the first column Column 2.first-item{color:orange;}

(2) Without adding a class method, we can add style to the first setting:first-child pseudo-class, in which case the decorated li still exists in the DOM tree.

First 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 with the first letter and style the span:

Hello World, and wish you have a good day!

.first{color:red;}

(2) If we don't create elements, we can do so by giving

Element sets P:first-letter pseudo-element to add style to it, which looks like a virtual span element is created and styled, but in fact the span element does not exist in DOM.

Hello World, and wish you have a good day!

p:first-letter{color:red;}

As we can see from the above example, pseudo-classes operate on elements already in the document tree, while pseudo-elements create elements outside the document tree. Thus, pseudo-classes differ from pseudo-elements in whether or not they create an element outside of the document tree.

Do pseudo-elements use single colons or double colons?

The css3 specification requires double colons (::) to represent pseudo-elements to distinguish pseudo-classes from pseudo-elements, such as::before and::after pseudo-elements using double colons (::),:hover and:active pseudo-classes using single colons (:). Most browsers, with the exception of a few versions prior to IE8, support the double colon (::) representation of pseudo-elements.

However, except for a few pseudo-elements such as::backdrop, which must use a double colon (::), most pseudo-elements support both a single colon and a double colon, such as::after, which works just as well as:after.

The w3c standard states that although the CSS3 standard requires pseudo-elements to be written with double colons, it still supports single colons. For backward compatibility, we recommend that you use the single colon for the time being.

Common pseudo-classes are:

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

:hover Select an element that is suspended by the mouse (matches the specified state)

:link Select elements that have not been accessed (match specified state)

:visited Select elements that have been visited (matching the specified state)

:first-child selects an element that satisfies the condition that it is the first child of its parent element

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

:focus Select the element that has keyboard input focus

:enable Select each enabled element

:disable Select each element that has been disabled

:checked Select each selected element

:target Select the current anchor element

:first-of-type selects elements that satisfy the requirement of being the first child element of a certain type of its parent element

:last-of-type selects elements that satisfy the condition that they are the last child of a certain type of their parent element

:only-of-type selects elements that satisfy the condition that they are the only children of a certain type of their parent element

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

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

:only-child selects an element that satisfies the condition that it is the only child of its parent element

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

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

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

:empty Select elements that satisfy no child elements

:in-range Select elements that satisfy values within a specified range

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

:invalid Select elements that satisfy values that are invalid

:valid Select elements that satisfy valid values

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

:optional Select form elements that are optional, i.e., without the "required" attribute

:read-only Select form elements with "readonly"

:read-write Select form elements without "readonly"

:root Select the root element

common pseudoelement

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

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

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

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

::selection Select the content of the specified element selected by the user

At this point, I believe everyone has a deeper understanding of "what is the difference between css3 pseudo-classes and pseudo-elements", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.