Web Front-endCSS TutorialHow to distinguish pseudo classes and pseudo elements in css? The differences and usage of pseudo-classes and pseudo-elements (code examples)How to distinguish pseudo classes and pseudo elements in css? The differences and usage of pseudo-classes and pseudo-elements (code examples)
When we learn front-end development, sometimes we always confuse pseudo-classes and pseudo-elements in CSS. So, what are pseudo-classes in css? What are pseudo-elements? What is the difference between them and how are they used? In this chapter, we will talk about pseudo-classes and pseudo-elements in CSS, and introduce the differences and basic usage of pseudo-classes and pseudo-elements in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Pseudo-class (used to add special effects to certain selectors)
The purpose of pseudo-class is to pass selection The selector finds information that does not exist in the DOM tree and cannot be obtained by regular CSS selectors. A pseudo-class begins with a colon: followed by the name of the pseudo-class and optional parameters enclosed in parentheses. Any regular selector can use pseudo-classes anywhere. Pseudo-class syntax is not case-sensitive. The functions of some pseudo-classes are mutually exclusive, and other pseudo-classes can be used by the same element at the same time. Moreover, in order to meet the DOM structure changes that occur when users operate the DOM, pseudo-classes can also be dynamic.
Pseudo-classes include two types: state pseudo-classes and structural pseudo-classes.
State pseudo-class is selected based on the current state of the element. The state of an element changes dynamically during interaction with the user, so the element will appear differently depending on 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 the element the mouse is hovering over;
:active applies to activated elements;
:visited applies to visited links and is mutually exclusive with :link.
:focus applies to elements that have keyboard input focus.
Structural pseudo-class is a new selector in css3. It uses the dom tree to filter elements and matches elements through the mutual relationship of the document structure. It can reduce the definition of class and id attributes, so that The document structure is simpler. 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 the last child element of this element;
:nth-of-type() selects the specified element;
:nth-last-of-type() selects the specified element, counting from the last element;
:first-of-type selects the first sub-element of the same type under a superior element;
:last-of-type selects the last similar child element of a superior element;
:only-child The selected 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 superior element;
:empty There is no content in the selected element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
.demo {
width: 200px;
height: 500px;
margin: 50px auto;
text-align: center;
}
.tab_content {
height: 50px;
background: red;
margin-bottom: 10px;
}
#tab1:target, #tab2:target, #tab3:target {
background:blue;
line-height: 50px;
}
</style>
</head>
<body>
<div class="demo">
<ul class="tabs">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">tab1</div>
<div id="tab2" class="tab_content">tab2</div>
<div id="tab3" class="tab_content">tab3</div>
</div>
</body>
</html>Rendering 1:
?x-oss-process=image/resize,p_40 "153655206482666How to distinguish pseudo classes and pseudo elements in css? The differences and usage of pseudo-classes and pseudo-elements (code examples)")
2: Pseudo elements (used to add special effects to certain selectors)
Pseudo elements are specific to elements Content operates rather than describes 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 adds new content at the front of the element content.
:after adds new content at the end of the element content.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo {
width: 500px;
height: 500px;
margin: 50px auto;
text-align: center;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<div class="demo">
<p class="spliter">分割线</p>
</div>
</body>
</html>Rendering:
?x-oss-process=image/resize,p_40 "153655468398751How to distinguish pseudo classes and pseudo elements in css? The differences and usage of pseudo-classes and pseudo-elements (code examples)")
##
The above is the detailed content of How to distinguish pseudo classes and pseudo elements in css? The differences and usage of pseudo-classes and pseudo-elements (code examples). For more information, please follow other related articles on the PHP Chinese website!
Two Images and an API: Everything We Need for Recoloring ProductsApr 15, 2025 am 11:27 AMI recently found a solution to dynamically update the color of any product image. So with just one of a product, we can colorize it in different ways to show
Weekly Platform News: Impact of Third-Party Code, Passive Mixed Content, Countries with the Slowest ConnectionsApr 15, 2025 am 11:19 AMIn this week's roundup, Lighthouse sheds light on third-party scripts, insecure resources will get blocked on secure sites, and many country connection speeds
Options for Hosting Your Own Non-JavaScript-Based AnalyticsApr 15, 2025 am 11:09 AMThere are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used
It's All In the Head: Managing the Document Head of a React Powered Site With React HelmetApr 15, 2025 am 11:01 AMThe document head might not be the most glamorous part of a website, but what goes into it is arguably just as important to the success of your website as its
What is super() in JavaScript?Apr 15, 2025 am 10:59 AMWhat's happening when you see some JavaScript that calls super()?.In a child class, you use super() to call its parent’s constructor and super. to access its
Comparing the Different Types of Native JavaScript PopupsApr 15, 2025 am 10:48 AMJavaScript has a variety of built-in popup APIs that display special UI for user interaction. Famously:
Why Are Accessible Websites so Hard to Build?Apr 15, 2025 am 10:45 AMI was chatting with some front-end folks the other day about why so many companies struggle at making accessible websites. Why are accessible websites so hard
The `hidden` Attribute is Visibly WeakApr 15, 2025 am 10:43 AMThere is an HTML attribute that does exactly what you think it should do:
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
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.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
SublimeText3 English version
Recommended: Win version, supports code prompts!
SublimeText3 Mac version
God-level code editing software (SublimeText3)
