define

Pseudo-classes: CSS pseudo-classes are keywords added to the selector that specify the particular state of the element to be selected. For example, :hover can be used to change the color of a button when the user hovers over it.

/* button:hover {color: blue; }Copy the code

Pseudo classes exist to format information that is not in the DOM tree and is not available to regular CSS selectors through selectors.

Pseudo-element: A pseudo-element is a keyword appended to the end of the selector that allows you to style specific parts of the selected element. The ::first-line pseudo-element in the following example changes the style of the first line of a paragraph.

/* The first line of each <p> element. */ p::first-line { color: blue; text-transform: uppercase; }Copy the code

Pseudo-classes, along with pseudo-elements, allow you to style elements not just based on the content in the document’s DOM tree, but also based on external factors such as navigation history (e.g. :visited), as well as the state of the content (e.g. :checked on some form elements), Or the position of the mouse (such as hover, which lets you know if the mouse hovers over an element) to apply the style.

Classification:

Pseudo classes:

  • :active, adds the style to the activated element.
  • :focus, adds the style to the selected element.
  • :hover, to add a style to an element when the mouse hovers over it.
  • :link, which adds special styles to unvisited links.
  • :visited, adds a special style to the visited link.
  • :first-child, which adds a special style to the first child of the element.
  • :lang, which allows the author to define the language used in the specified element.

Pseudo elements:

  • :first-letter, which adds a special style to the first letter of the text.
  • :first-line adds a special style to the first line of text.
  • :before, insert something before an element.
  • :after, insert something after an element.

The difference between:

Here is a simple HTML list fragment:

<ul> <li> I am in the first column </li> <li> I am in the second column </li> </ul>Copy the code

If you want to add a style to the first item, you can add a class to the first item and define the style in that class:

<ul> <li class="first-item"> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> li. First-item {color: orange}Copy the code

Instead of adding a class method, we can style it by setting the first: first-Child pseudo-class. At this point, the modified element is still in the document tree.

li:first-child {
    color: orange
}
Copy the code

Here is another simple HTML paragraph fragment:

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

If you want to style the first letter of the paragraph, wrap an element in the first letter and style the SPAN element:

<p><span class="first">H</span>ello World, and wish you have a good day! </p> .first { font-size: 5em; }Copy the code

Instead of creating an element, we can set it to

The :first-letter pseudo-element to style it. At this point, it looks as if a virtual element has been created and styled, but it doesn’t actually exist in the document tree.

<p>Hello World, and wish you have a good day! </p> p:first-letter { font-size: 5em; }Copy the code

As you can see from the example above, the pseudo-class operates on an existing element in the document tree, while the pseudo-element creates an element outside the document number. Thus, the difference between a pseudo class and a pseudo element is whether an element outside the document tree is created.

Conclusion:

  • Pseudo-classes are essentially designed to make up for regular CSS selectors in order to get more information;
  • A pseudo-element essentially creates a virtual container with content;
  • The syntax of pseudo-classes and pseudo-elements in CSS3 is different.
  • Multiple pseudo-classes can be used simultaneously, but only one pseudo-element can be used simultaneously;