Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci-tutorial css-php.cn

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

Pemilih kelas semu keadaan UI, digunakan untuk memilih elemen UI dalam keadaan tertentu Ia digunakan terutamanya pada bentuk HTML Ia mentakrifkan gaya yang berbeza mengikut keadaan elemen borang yang berbeza . untuk meningkatkan pengalaman pengguna.

Ciri-ciri pemilih kelas pseudo status UI: gaya yang ditentukan hanya berfungsi dalam keadaan tertentu

Status elemen borang termasuk fokus, kehilangan fokus, dipilih, tidak dipilih dan tersedia , tidak tersedia, sah, tidak sah, diperlukan, pilihan, baca sahaja, dsb.

Pemilih kelas pseudo status UI
Pemilih	Penerangan fungsi	Versi
E:fokus	Pilih elemen fokus dalam bentuk	3
E:ditanda	Pilih radio atau elemen kotak semak yang dipilih dalam borang	3
E:enabled	Pilih elemen yang tersedia dalam borang	3
E:disabled	Pilih elemen yang tidak tersedia (iaitu dilumpuhkan) dalam bentuk	3
E:sah	Pilih elemen yang kandungannya dalam borang memenuhi keperluan	3
E:tidak sah	Pilih elemen yang kandungan yang diisi dalam borang tidak memenuhi keperluan, seperti URL atau e-mel yang tidak sah, atau tidak sepadan dengan corak yang diberikan oleh atribut corak	3
E:dalam julat	Pilih elemen yang nombornya dimasukkan dalam borang berada dalam julat yang sah	3
E:luar julat	Elemen di mana nombor yang dimasukkan dalam borang pemilihan melebihi julat yang sah	3
E:diperlukan	Dalam borang pemilihan Elemen yang diperlukan	3
E:pilihan	Atribut yang diperlukan dibenarkan dalam borang pemilihan dan elemen yang tidak dinyatakan seperti yang diperlukan	3
E :baca sahaja	Pilih elemen baca sahaja dalam borang	3
E:baca-tulis	Pilih Elemen dalam borang yang statusnya bukan baca sahaja	3
E:default	Pilih butang radio atau kotak semak yang dalam keadaan yang dipilih secara lalai kotak Pilih, walaupun pengguna menetapkan keadaan pilihan butang radio atau kawalan kotak semak kepada keadaan tidak dipilih, gaya yang dinyatakan dalam pemilih lalai E: masih sah	3
E:tak tentu	Gaya keseluruhan kumpulan kotak butang radio apabila tiada satu pun kotak butang radio dalam borang pemilih dipilih Jika pengguna memilih mana-mana kotak kotak butang radio, gayanya tidak dinyatakan	3

1. Pemilih E:hover

digunakan untuk menentukan gaya yang digunakan oleh elemen apabila penunjuk tetikus bergerak ke atasnya

Penggunaan:

<元素>:hover{ 
CSS样式 
}

Salin selepas log masuk

Kita boleh menambah atribut jenis elemen dalam "".

Contoh:

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

Salin selepas log masuk

Hasil larian adalah seperti yang ditunjukkan di bawah:

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

2. Pemilih aktif

:active: Tentukan gaya apabila pautan diklik.

Anda boleh menentukan gaya apabila mengklik pautan melalui :active pemilih kelas pseudo Kod sampel adalah seperti berikut:

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

Salin selepas log masuk

Hasil berjalan adalah seperti yang ditunjukkan di bawah: <. 🎜>

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

3. E:pemilih pautan

: Tentukan gaya pautan biasa atau tidak dilawati ; :link

Anda boleh menetapkan gaya untuk pautan biasa atau tidak dilawati melalui pemilih kelas pseudo :link Kod sampel adalah seperti berikut:

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

Salin selepas log masuk

Hasil yang dijalankan adalah seperti yang ditunjukkan di bawah: <. 🎜>

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

4 E: pemilih yang dilawati

: Tentukan gaya pautan yang dilawati; 🎜>

melalui :visitedPemilih kelas pseudo boleh menetapkan gaya untuk pautan yang telah dilawati Kod sampel adalah seperti berikut:

:visitedHasil yang dijalankan adalah seperti yang ditunjukkan di bawah:

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

Salin selepas log masuk

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

5 E: pemilih fokus

: digunakan untuk menentukan gaya yang digunakan oleh elemen untuk dapatkan fokus kursor

:focus contoh Kod adalah seperti berikut:

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

Salin selepas log masuk

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

6. E:enabled pseudo -class selector dan E:disabled pseudo-class selector

1), E:enabled selector digunakan untuk menentukan gaya apabila elemen berada dalam keadaan tersedia. 2). Pemilih E:disabled digunakan untuk menentukan gaya apabila elemen berada dalam keadaan dilumpuhkan.

<!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>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>

Salin selepas log masuk

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

7 E:pemilih kelas pseudo baca sahaja dan pemilih kelas pseudo E: baca-tulis

1), E:pemilih baca sahaja digunakan untuk menentukan gaya apabila elemen berada dalam keadaan baca sahaja. 2). Pemilih E:baca-tulis digunakan untuk menentukan gaya apabila elemen berada dalam keadaan bukan baca sahaja.

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

Salin selepas log masuk

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

8 Pemilih kelas pseudo E:ditanda, E: lalai dan tak tentu

1). Pemilih kelas pseudo E:cehcked digunakan untuk menentukan gaya apabila butang radio atau kotak semak dalam borang berada dalam keadaan yang dipilih. 2). Pemilih lalai E: digunakan untuk menentukan gaya butang radio atau kawalan kotak semak yang berada dalam keadaan yang dipilih secara lalai apabila halaman dibuka.

3). E: pemilih tak tentu digunakan untuk menentukan gaya keseluruhan kumpulan kotak butang radio apabila tiada satu kotak butang radio dalam sekumpulan kotak butang radio ditetapkan kepada keadaan yang dipilih apabila halaman dibuka.

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

Salin selepas log masuk

Pilihan lalai Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

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

Salin selepas log masuk

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

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

Salin selepas log masuk

Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

9. Pemilih kelas Pseudo E::selection

Pemilih kelas pseudo E:selection digunakan untuk menentukan gaya apabila elemen dipilih .

<!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>伪类选择器E::selection</h1>
<input type="text" placeholder="文本">
</body>
</html>

Salin selepas log masuk

1Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci

10 E:pemilih kelas pseudo tidak sah dan pemilih kelas pseudo yang sah

1). Pemilih kelas pseudo E: tidak sah digunakan untuk menentukan gaya apabila kandungan elemen tidak boleh melepasi semakan yang ditentukan oleh HTML5 dengan menggunakan atribut seperti yang diperlukan bagi elemen atau kandungan elemen tidak mematuhi format ditentukan oleh unsur. 2). E: pemilih kelas pseudo yang sah digunakan untuk menentukan gaya apabila kandungan elemen boleh lulus semakan yang ditentukan oleh HTML5 dengan menggunakan atribut seperti yang diperlukan bagi elemen atau apabila kandungan elemen mematuhi format yang ditentukan oleh unsur.

<!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>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱"></form>
</body>
</html>

Salin selepas log masuk

11 E:memerlukan pemilih kelas pseudo dan E:pemilih kelas pseudo pilihan

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>E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>

Salin selepas log masuk

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

Salin selepas log masuk

各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前端入门）
Atas ialah kandungan terperinci Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

选择器	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	√