Summary of the differences between pseudo-classes and pseudo-elements in css and css3

In the process of learning CSS, it is especially easy to confuse two concepts: Pseudo classes and pseudo elements. The definition of both in w3c is: CSS pseudo-classes are used to add special effects to certain selectors. CSS pseudo-elements are used to add special effects to certain selectors. Pseudo-classes were initially used only to represent the dynamic status of some elements, typically the various statuses of links (LVHA). The CSS2 standard subsequently expanded its conceptual scope to include all "ghost" categories that logically exist but do not need to be identified in the document tree. Pseudo elements represent sub-elements of an element. Although this sub-element exists logically, it does not actually exist in the document tree. Let’s talk about the difference between pseudo classes and pseudo elements in CSS and CSS3.

You can first learn free courses related to php Chinese website

1. 《CSS3 From entry to mastering tutorial》中 css3 pseudo-class selector Course

2. 《Dark Horse Programmer css video tutorial》中pseudo-classes and pseudo-elements Related video tutorial

# #The difference between pseudo-classes and pseudo-elements

1.

About the differences and precautions between pseudo-classes and pseudo-elements in CSS3

In CSS3 The standard is that pseudo-classes use a single colon ":" and pseudo-elements use a double colon "::" (to avoid confusion). But before this, both pseudo-classes and pseudo-elements used a single colon ":", so in order to ensure compatibility with both pseudo-elements Both methods of use are possible

However, lower versions of IE have double-colon compatibility issues, so people who wrote styles in the past simply used single colons for pseudo-classes and pseudo-elements, causing this confusion to continue.

2.

The difference between CSS pseudo-classes and pseudo-elements

The effect of pseudo-classes can be achieved by adding an actual class, while the effect of pseudo-elements needs to be achieved by This can only be achieved by adding an actual element, which is why one of them is called a pseudo-class and the other is called a pseudo-element. The reason why pseudo-elements and pseudo-classes are so easy to confuse is because they have similar effects and similar writing methods. However, in fact, in order to distinguish the two, CSS3 has clearly stipulated that pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons. To represent.

3.

Explanation of pseudo-classes and pseudo-elements in CSS and the differences between them

CSS pseudo-classes (Pseudoclasses) are the bolts of the selector, used to specify The state of a selector or its associated selectors. Their form is selector:pseudoclass{property:value;}, simply use a half-width English colon (:) to separate the selector and pseudo-class.

CSS Many suggestions are not supported by browsers, but there are four CSS pseudo-classes that can be used safely for connections. Link is used for access connections. visited is used for connections that have already been visited. Hover is used for the connection over which the mouse cursor is placed. active is used on connections that have received focus (for example, been clicked).

4.

Introduction to pseudo-elements in CSS and their differences from pseudo-classes

We know that with the further improvement of CSS specifications, the number of new CSS pseudo-elements has become more There are more and more, but in daily development, the ones we commonly use and whose browser support is more optimistic are before and after. But what we use in daily development are: after {content: ”;} to clear floats and add an element (take care of the single colon used in IE8 browser). But what are the possible values ​​​​of content?

5.

Summary of commonly used css attribute pseudo-elements and pseudo-elements

Pseudo-classes were initially used to represent the dynamic status of some elements, typically commonly used links. The various states (link, active, hover, visited), then the CSS2 standard

expanded its conceptual scope, making it all "ghost" categories that exist logically but are not identified in the document tree
.

Pseudo elements represent the sub-elements of a certain element. Although this sub-element exists logically, it does not actually exist in the document tree, such as the after, before, etc. we usually use.

6. A brief discussion of CSS pseudo-classes and pseudo-elements

The pseudo-class selection element is based on the state of the current element, or the current location of the element. It has characteristics, rather than static signs such as the element's id, class, and attributes. Since the state changes dynamically, when an element reaches a specific state, it may get a pseudo-class style; when the state changes, it will lose this style. It can be seen from this that its function is somewhat similar to that of class, but it is based on abstraction outside of the document, so it is called a pseudo class.

Related Questions and Answers

1. What is the difference between pseudo-classes and pseudo-elements?

【Related recommendations】

1. PHP Chinese website free video tutorial: "php.cn Dugu Jiujian (2)-css video tutorial"

2. PHP Chinese website free tutorial: CSS 3.0 Reference Manual

The above is the detailed content of Summary of the differences between pseudo-classes and pseudo-elements in css and css3. For more information, please follow other related articles on the PHP Chinese website!