What do css3 pseudo-classes and pseudo-elements mean?

<ul>
  <li>第一个</li>
  <li>第二个</li>
</ul>

li:first-child{color:orage;}

Example 2:

<p>Hello World, and wish you have a good day!</p>

If you want to add a style to the first letter of the paragraph, you can use the following methods:

(1) Wrap the element to the first letter and set the style for span:

<p>
  <span class="first">H</span>ello World, and wish you have a good day!
</p>

.first{color:red;}

(2) If the element is not created, we can pass it to

<p>Hello World, and wish you have a good day!</p>

p:first-letter{color:red;}

From the above example, we can see that the operating 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 outside the document tree is created.

Use single colon or double colon for pseudo elements?

The css3 specification requires the use of double colons (::) to represent pseudo-elements to distinguish pseudo-classes and pseudo-elements, such as ::before and :: Pseudo-elements such as after use double colons (::), and pseudo-classes :hover and :active use single colons (:). Except for some browsers lower than IE8, most browsers support the double colon (::) representation method of pseudo-elements.

However, except for a few pseudo-elements such as ::backdrop that must use double colons (::), most pseudo-elements support single colon and double colon writing, such as: :after, written as :after can also run normally.

The w3c standard states that although the CSS3 standard requires pseudo elements to be written with double colons, single colon writing is still supported. For backward compatibility, we recommend that you still use the single colon writing method for now.

Commonly used pseudo-classes are:

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

• :hover selects the element that is hovered by the mouse (matches the specified state)

• :link selects the element that has not been visited (matches the specified state)

• :visited Selects the element that has been visited (matches the specified status)

• :first-child Selects the element that is the first child element of its parent element

• :lang(value) Selects the element with the specified lang attribute

• :focus Selects the element with keyboard input focus

• :enable Selects every enabled element

• :disable Selects every disabled element

• :checked Select each selected element

• :target Select the current anchor element

• :first-of-type Select if its parent The element's first child element of a certain type

• :last-of-type selects the element that is the last child element of a certain type of its parent element

• :only-of-type selects the element that satisfies Is the only element of a certain type of child element of its parent element

• :nth-of-type(n) Selects the element that is the nth child element of a certain type of its parent element

• :nth-last-of-type(n) Selects the nth element of a certain type that is the penultimate of its parent element

• :only-child selects the element that is the only child element of its parent element

• :last-child selects the element that is the last element of its parent element

• :nth-child(n) Selects the element that is the nth child element of its parent element

• :nth-last-child(n) Selects the element that satisfies The element that is the nth child element from the last to the last of its parent element

• :empty selects the element that has no child elements

• :in-range selects Satisfies the elements whose value is within the specified range

• :out-of-range Selects the elements whose value is not within the specified range

• :invalid Selects the condition that satisfies Elements whose value is an invalid value

• :valid Select elements whose value is a valid value

• :not(selector) Select elements which do not satisfy the selector Element

• :optional Select a form element that is optional, that is, there is no "required" attribute

• :read-only Select "readonly" The form element

• :read-write selects the form element without "readonly"

• :root selects the root element

Commonly used 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 Insert content after the content of the specified element

• ::selection Select the content selected by the user in the specified element

(Learning video sharing : css video tutorial)

The above is the detailed content of What do css3 pseudo-classes and pseudo-elements mean?. For more information, please follow other related articles on the PHP Chinese website!