An article explaining the UI state pseudo-class selector in CSS in detail-CSS Tutorial-php.cn

Table of Contents

选择器E:hover、E:active和E:focus

E:enabled伪类选择器与E:disabled伪类选择器

read-only伪类选择器与E:read-write伪类选择器

checked伪类选择器

default伪类选择器

indeterminate伪类选择器

伪类选择器E::selection

E:invalid伪类选择器与E:valid伪类选择器

E:required伪类选择器与E:optional伪类选择器

E:in-range伪类选择器与E:out-of-range伪类选择器

Home

Web Front-end

CSS Tutorial

An article explaining the UI state pseudo-class selector in CSS in detail

青灯夜游

Aug 03, 2022 pm 12:09 PM

css ui state pseudo class selector

An 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.

UI status pseudo-class selector
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样式 
}

Copy after login

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Copy after login

The running result is as shown below:

An article explaining the UI state pseudo-class selector in CSS in detail

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Copy after login

The running result is as shown below:

An article explaining the UI state pseudo-class selector in CSS in detail

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Copy after login

The running results are as shown below:

An article explaining the UI state pseudo-class selector in CSS in detail

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Copy after login

The running result is as shown below:

An article explaining the UI state pseudo-class selector in CSS in detail

5. E: focus selector

: focus: Used Specify the style used by the element to obtain the cursor focus

The sample code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1 id="选择器E-hover-E-active和E-focus">选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br />
<br />
密码：<input type="password" placeholder="请输入密码"></form>
</body>
</html>

Copy after login

An article explaining the UI state pseudo-class selector in CSS in detail

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    </style>
</head>
<body>
<h1 id="E-enabled伪类选择器与E-disabled伪类选择器">E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>

Copy after login

An article explaining the UI state pseudo-class selector in CSS in detail

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1 id="read-only伪类选择器与E-read-write伪类选择器">read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>

Copy after login

An article explaining the UI state pseudo-class selector in CSS in detail

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1 id="checked伪类选择器">checked伪类选择器</h1>
<form>
房屋状态： <input type="checkbox">水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>

Copy after login

An article explaining the UI state pseudo-class selector in CSS in detail

Default selection

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1 id="default伪类选择器">default伪类选择器</h1>
<form>
房屋状态： <input type="checkbox" checked>水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>

Copy after login

An article explaining the UI state pseudo-class selector in CSS in detail

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1 id="indeterminate伪类选择器">indeterminate伪类选择器</h1>
<form>
性别： <input type="radio">男 <input type="radio">女</form>
</body>
</html>

Copy after login

An article explaining the UI state pseudo-class selector in CSS in detail

9. Pseudo-class selector E::selection

The E:selection pseudo-class selector is used to specify the style when the element is selected.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1 id="伪类选择器E-selection">伪类选择器E::selection</h1>
<input type="text" placeholder="文本">
</body>
</html>

Copy after login

1An article explaining the UI state pseudo-class selector in CSS in detail

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1 id="E-invalid伪类选择器与E-valid伪类选择器">E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱"></form>
</body>
</html>

Copy after login

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元素的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	</head>
	<body>
		<h1 id="E-required伪类选择器与E-optional伪类选择器">E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>

Copy after login

12、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1 id="E-in-range伪类选择器与E-out-of-range伪类选择器">E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>

Copy after login

1An article explaining the UI state pseudo-class selector in CSS in detail

各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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

How to fix KB5055523 fails to install in Windows 11?

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1664

CakePHP Tutorial

1423

Laravel Tutorial

1317

PHP Tutorial

1268

C# Tutorial

1242

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

How to insert pictures on bootstrap Apr 07, 2025 pm 03:30 PM

There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.

How to write split lines on bootstrap Apr 07, 2025 pm 03:12 PM

There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.

How to set up the framework for bootstrap Apr 07, 2025 pm 03:27 PM

To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.

How to resize bootstrap Apr 07, 2025 pm 03:18 PM

To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-

How to use bootstrap button Apr 07, 2025 pm 03:09 PM

How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text

See all articles