


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 }
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
:first- child
and pseudo-element:first-letter to compare. p>i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
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>
So if we don't use Pseudo elements, what should be done to achieve the above effect?
.first-letter {color: red} <p><span class='first-letter'>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 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!

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.

Robin has covered this before, but I've heard some confusion about it in the past few weeks and saw another person take a stab at explaining it, and I wanted

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not

Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that

Page reloads are a thing. Sometimes we refresh a page when we think it’s unresponsive, or believe that new content is available. Sometimes we’re just mad at

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it “feels right,” lol). The truth

Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they

Wufoo has always been great with integrations. They have integrations with specific apps, like Campaign Monitor, Mailchimp, and Typekit, but they also


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

WebStorm Mac version
Useful JavaScript development tools