Web Front-endCSS TutorialAn article explaining the UI state pseudo-class selector in CSS in detailAn article explaining the UI state pseudo-class selector in CSS in detail
UI state pseudo-class selector is used to select UI elements in a certain state. It is mainly used on HTML forms. It defines different styles according to the different states of the form elements. to enhance user experience.
Characteristics of the UI status pseudo-class selector: the specified style only works in a certain state
The status of the form element includes focus, loss of focus, selected, unselected, and available , unavailable, valid, invalid, required, optional, read-only, etc.
| Selector | Function description | Version |
|---|---|---|
| E:focused | Select the focused element in the form | 3 |
| E:checked | Select the selected radio or checkbox element in the form | 3 |
| E:enabled | Select the elements available in the form | 3 |
| E:disabled | Select elements that are not available (i.e. disabled) in the form | 3 |
| E:valid | Select elements whose content in the form meets the requirements | 3 |
| E:invalid | Select elements where the content filled in the form does not meet the requirements, such as illegal URL or Email, or does not match the pattern given by the pattern attribute | 3 |
| E:in-range | Select elements whose numbers entered in the form are within the valid range | 3 |
| E:out-of -range | Select elements where the number entered in the form exceeds the valid range | 3 |
| E:required | Select elements in the form Required elements | 3 |
| E:optional | Select elements that are allowed to use the required attribute and are not specified as required in the form | 3 |
| E :read-only | Select elements in the form that are read-only | 3 |
| E:read-write | Select Elements in the form whose status is not read-only | 3 |
| E:default | Select the radio button or checkbox that is in the selected state by default Select box, even if the user sets the selected state of the radio button or check box control to a non-selected state, the style specified in the E:default selector is still valid | 3 |
| E:indeterminate | The style of the entire group of radio button boxes when none of the radio button boxes in the selector form is selected. If the user selects any of the radio button boxes box, the style is unassigned | 3 |
1. E:hover selector
is used to specify the style used by the element when the mouse pointer moves over it
Usage:
<元素>:hover{
CSS样式
}We can add the type attribute of the element in "
Example:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>The running result is as shown below:
2. E:active selector
:active: Define the style when the link is clicked.
You can define the style when clicking a link through the :active pseudo-class selector. The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
a:active {
background: #000;
border: 1px solid black;
color: white;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>The running result is as shown below:
3. E:link selector
:link: Define ordinary or unvisited links style;
You can set the style for ordinary or unvisited links through the :link pseudo-class selector. The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>The running results are as shown below:
4. E: visited selector
: visited: defines the visited link Style;
You can set the style for the visited link through the :visited pseudo-class selector. The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px soild red;
color: red;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>The running result is as shown below:
5. E: focus selector
: focus: Used Specify the style used by the element to obtain the cursor focus
The sample code is as follows:
nbsp;html>
<meta>
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
</style>
<h1 id="选择器E-hover-E-active和E-focus">选择器E:hover、E:active和E:focus</h1>
6, E:enabled pseudo Class selector and E:disabled pseudo-class selector
1), E:enabled selector is used to specify the style when the element is in the available state.
2). The E:disabled selector is used to specify the style when the element is in a disabled state.
nbsp;html>
<meta>
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
<h1 id="E-enabled伪类选择器与E-disabled伪类选择器">E:enabled伪类选择器与E:disabled伪类选择器</h1>
7. E:read-only pseudo-class selector and E:read-write pseudo-class selector
1), E:read-only selector is used to specify the style when the element is in the read-only state.
2). The E:read-write selector is used to specify the style when the element is in a non-read-only state.
nbsp;html>
<meta>
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
</style>
<h1 id="read-only伪类选择器与E-read-write伪类选择器">read-only伪类选择器与E:read-write伪类选择器</h1>
8, pseudo-class selectors E:checked, E:default and indeterminate
1 ), E:cehcked pseudo-class selector is used to specify the style when the radio radio button or checkbox in the form is in the selected state.
2). The E:default selector is used to specify the style of the radio button or check box control that is in the selected state by default when the page is opened.
3). The E: indeterminate selector is used to specify the style of the entire group of radio button boxes when no single radio button box in a group of radio button boxes is set to the selected state when the page is opened.
nbsp;html>
<meta>
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
<h1 id="checked伪类选择器">checked伪类选择器</h1>
Default selection
nbsp;html>
<meta>
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
<h1 id="default伪类选择器">default伪类选择器</h1>
nbsp;html>
<meta>
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
<h1 id="indeterminate伪类选择器">indeterminate伪类选择器</h1>
9. Pseudo-class selector E::selection
The E:selection pseudo-class selector is used to specify the style when the element is selected.
nbsp;html>
<meta>
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
<h1 id="伪类选择器E-selection">伪类选择器E::selection</h1>
<input>
10. E:invalid pseudo-class selector and E:valid pseudo-class selector
1), E:invalid pseudo-class selector is used to specify the style when the element content cannot pass the check specified by HTML5 by using attributes such as requirede of the element or the element content does not conform to the format specified by the element.
2). The E:valid pseudo-class selector is used to specify the style when the element content can pass the check specified by HTML5 using attributes such as requirede of the element or the element content conforms to the format specified by the element.
nbsp;html>
<meta>
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
<h1 id="E-invalid伪类选择器与E-valid伪类选择器">E:invalid伪类选择器与E:valid伪类选择器</h1>
11. E:required pseudo-class selector and E:optional pseudo-class selector
1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
nbsp;html>
<meta>
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
<h1 id="E-required伪类选择器与E-optional伪类选择器">E:required伪类选择器与E:optional伪类选择器</h1>
12、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
nbsp;html>
<meta>
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
<h1 id="E-in-range伪类选择器与E-out-of-range伪类选择器">E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input>
各UI元素状态伪类选择器受浏览器的支持情况
| 选择器 | Firefox | Safari | Opera | IE8 | Chrome |
|---|---|---|---|---|---|
| E:hover | √ | √ | √ | √ | √ |
| E:active | √ | √ | √ | x | √ |
| E:focus | √ | √ | √ | √ | √ |
| E:enable | √ | √ | √ | x | √ |
| E:disable | √ | √ | √ | x | √ |
| E:read-only | √ | x | √ | x | x |
| E:read-write | √ | x | √ | x | x |
| E:checked | √ | √ | √ | x | √ |
| E:default | √ | x | x | x | x |
| E:indeterminate | √ | √ | x | √ | √ |
| E:selection | √ | √ | √ | x | √ |
（学习视频分享：web前端入门）
The above is the detailed content of An article explaining the UI state pseudo-class selector in CSS in detail. For more information, please follow other related articles on the PHP Chinese website!
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AMWhat does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.
CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AMCSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For
@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo
CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PMCSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust
Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AMUsing scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
Revisiting Image MapsMay 07, 2025 am 09:40 AMLet’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.
State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AMThe State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.
What is CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
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 Mac version
God-level code editing software (SublimeText3)
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),
Notepad++7.3.1
Easy-to-use and free code editor
WebStorm Mac version
Useful JavaScript development tools
