Pseudo-classes and pseudo-elements in CSS and the differences between them

This article mainly introduces the detailed explanation of pseudo-classes and pseudo-elements in CSS and the differences between them. In fact, CSS3 standardizes a simple and crude method, that is, using a pseudo-class before It is represented by a colon, and two colons are used before the pseudo element, so that it is not easily confused. Friends in need can refer to

The concept and function of CSS pseudo-class
#CSS pseudo-classes (Pseudoclasses) are the bolts of selectors, used to specify the state of one or related 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.
1.link is used for access connections.
2.visited is used on already visited connections.
3.hover is used for the connection on which the mouse cursor is placed.
4.active is used for connections that gain focus (for example, being clicked).
For example:

ExampleSourceCode   
a:link{     
color:red
}     
a:visited{     
color:green
}     
a:hover{     
color:blue
}     
a:active{     
color:orange     
}

Note:

Although CSS gives you bypass control, using different colors to indicate that accessed connections are A good habit because many users still expect this. CSS pseudo-classes (except hover) are not commonly used, and I'm afraid they are not as commonly used in the past. Therefore, it is not as useful as it used to be. But if you can collect users' opinions, you will find that it should be used.
Traditionally, connection text is blue and visited connections are purple. Perhaps, this is the most effective and useful color. However, with the widespread development of CSS, this color is no longer commonplace, and users no longer assume that connections must be blue or purple.
You should also be able to use the hover pseudo-class on other elements besides connections. Unfortunately, InternetExplore does not support this. This is really a huge annoyance.

Pseudo-elements
In fact, pseudo-elements in CSS do not exist in HTML, and they are usually used for special processing of certain elements. Only then will commonly used pseudo-element be used:
:
:first-lineYou can specify the style of the first line of the p element
:
:first-letter You can specify the style of the first word of the p element
::selection
Define the effect of user highlight
:
:beforeIn the element Insert content before
:
:afterInsert content after the element
Example HTML

<p>
    臣亮言，先帝創業未半<br>

    每天，天剛亮時，我母親便把我喊醒，叫我披衣坐起。我從不知道她醒來坐了多久了。   
</p>

##first-line and first-letter

/* 第一行樣式 */
p::first-line {   
    color: red;   
}   
/* 開頭第一個字樣式 */
p::first-letter {   
    font-size: 30px;   
}   
selection   
// 反白後的效果   
p::selection {   
    background: red;   
    color: #FFF;   
}   
// Firefox   
p::-moz-selection {   
    background: red;   
    color: #FFF;   
}

The difference between pseudo-class and pseudo-element:First, read
w3c for both Definition: 1.CSS pseudo-classes are used to add special effects to certain selectors. 2.CSS pseudo-elements are used to add special effects to certain selectors.
Two points can be made clear. The first is that both are related to the selector, and the second is to add some "special" effects. The special thing here is that the two describe things that other css cannot describe.
Pseudo-class type

Pseudo-element type

Difference

Pseudo-class is used here

:first- child
and pseudo-element:first-letter to compare.

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

//Pseudo-class: first-child Add style to the first child element

If we do not use pseudo-classes and want to achieve the above effect , you can do this:

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

That is, we add a class to the first child element, and then define the style of this class. Then let's look at adding styles to the first letter for the element:

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

//Pseudo element: first-letter

So if we don't use Pseudo elements, 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>

That is, we add a span to the first letter, and then add a style to the 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. This is why one of them is called pseudo-class and the other is That's why it's called a pseudo-element.

总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes   
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

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