Detailed introduction to pseudo-classes and pseudo-elements in CSS (code examples)

This article brings you a detailed introduction (code example) about pseudo-classes and pseudo-elements in CSS. It has certain reference value. Friends in need can refer to it. I hope It will help you.

1. Pseudo-classes

Pseudo-classes include two types:State pseudo-class(UI pseudo-class) andStructural pseudo-class .

(1) The status pseudo-class is selected based on the current status of the element.

The state of an element changes dynamically during interaction with the user, so the element will present different styles according to its state. This style will appear when the element is in a certain state, and will be lost when it enters another state.

Common status pseudo-classes mainly include:

:link applies to links that have not been visited;
:hover applies to elements that the mouse is hovering over;
:active Applies to activated elements;
:visited applies to visited links, mutually exclusive with :link.
:focus applies to elements that have keyboard input focus.
:target applies to the element pointed to after the link is clicked

The first 4 pseudo-classes have the same specificity. If they are not used in the order listed here, the browser may not The expected results will be displayed. To make it easier to remember, think of it this way: "LoVe? HA!" The capital letter is the first letter of each pseudo-class.

input:focus {border:1px solid blue;}

When the cursor is in the input field, a blue border will be added to the field. This allows the user to clearly
know where the entered characters will appear.

<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2> 
#more_info:target {background:#eee;}

will add a light gray background to the element when the user clicks the link to redirect to the element with the ID more_info.

(2) Structural pseudo-class is a new selector in CSS3

Use the dom tree to filter elements and match elements through the mutual relationship of the document structure, which can reduce the definition of class and id attributes , making the document structure more concise.

Common ones include:

:first-child selects the first child element of an element;
:last-child selects the last child element of an element;
:nth-child() selects one or more specific child elements of an element;
:nth-last-child() selects one or more specific child elements of an element, starting from Counting starts from the last child element;
:nth-of-type() selects the specified element;
:nth-last-of-type() selects the specified element and starts counting from the last element;
:first-of-type selects the first similar child element under a superior element;
:last-of-type selects the last similar child element of a superior element;
:only-child selected The element is the only child element of its parent element;
:only-of-type selects an element that is the only child element of the same type as its parent element;
:empty There is no content in the selected element .

2. Pseudo elements

Pseudo elements operate on specific content in the element rather than describing the state. Its operation level is one level deeper than pseudo-classes, so its dynamicity is much lower than pseudo-classes. In fact, pseudo-elements are things that cannot be done by ordinary selectors before or after certain elements. The content of the control is the same as the element, but it itself is an abstraction based on the element and does not exist in the document structure!

Common pseudo-element selectors include:

:first-letter selects the first letter (letter) of the element text.
:first-line selects the first line of element text.
:before Add new content at the front of the element content.
:after adds new content at the end of the element content.

3. Note

Single colon (:) is used for CSS3 pseudo-classes, and double colon (::) is used for CSS3 pseudo-elements. In order to be compatible with some browsers , generally single colon

is used. Compatibility issues are left to postcss. This article does not cover compatibility writing methods, including prefix issues, which can be left to autoprefixer. (I don’t understand what this sentence means. Let’s take a look at it later)

The effect of pseudo-class (structural pseudo-class) can be achieved by adding an actual class, while the effect of pseudo-element needs to be achieved by adding An actual element can be achieved, which is why one of them is called a pseudo-class and the other is called a pseudo-element.

4. Use of pseudo-elements

(1) Clear float

.clear:after {
content: '';
display: block;
clear: both;
}

(2) Draw dividing line

<style>
* {
  padding: 0;
  margin: 0;
}
.spliter::before, .spliter::after {
  content: '';
  display: inline-block;
  border-top: 1px solid black;
  width: 200px;
  margin: 5px;
}
  </style></head><body>
  <p class="spliter">分割线</p></body>

The above is the detailed content of Detailed introduction to pseudo-classes and pseudo-elements in CSS (code examples). For more information, please follow other related articles on the PHP Chinese website!