The difference between CSS pseudo-classes and pseudo-elements

Pseudo classes and pseudo elements are independent of the document structure. The way they obtain elements is not based on basic element characteristics such as id, class, attribute, but on elements (pseudo-classes) in a special state, Or special content in the element (pseudo-element). The differences are summarized below:

CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。

css pseudo Elements (Pseudo-elements): Used to set special effects to certain selectors, which is to set and operate specific content in the elements. The operation level is deeper than pseudo-classes, so the dynamics are higher than pseudo-classes. Difference.

w3c<a href="http://www.php.cn/wiki/1550.html" target="_blank"></a> Definition of both:

• CSS Pseudo classes are used to add special effects to certain selectors.

• CSS Pseudo elements are used to add special effects to certain selectors.

:first-child and the pseudo-element :first-letter are used for comparison.

p>i:first-child {color: red}<p>
    <i>first</i>
    <i>second</i></p>

:first-child Add style to the first child elementIf we do not use pseudo-classes and want to achieve the above effect, we can do this:

.first-child {color: red}<p>
    <i class="first-child">first</i>
    <i>second</i></p>

p::first-letter {color: red}<p>I am stephen lee.</p>

::first-letter Add style to the first letter Then if we don’t use pseudo-elements, we need to achieve What should be done to achieve the above effect?

.first-letter {color: red}<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

span to the first letter, and then add a style to span. The difference between the two has come out. That is:

The effect of 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, which is why they are a Called a pseudo-class, a reason called a pseudo-element.

css3 In order to distinguish between the two, it has been clearly specified that pseudo-classes are represented by one colon, while pseudo-elements are represented by two colons.

:Pseudo-classes
::Pseudo-elements

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