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

Jadual Kandungan

选择器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伪类选择器

Rumah

hujung hadapan web

tutorial css

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

青灯夜游

Aug 03, 2022 pm 12:09 PM

css ui negeri pemilih kelas pseudo

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

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

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

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 id="checked伪类选择器">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 id="default伪类选择器">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 id="indeterminate伪类选择器">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 id="伪类选择器E-selection">伪类选择器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 id="E-invalid伪类选择器与E-valid伪类选择器">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 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>

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

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	√

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell
3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini
2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall
3 minggu yang lalu By DDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran
4 minggu yang lalu By DDD

Panduan Atomfall: Lokasi Item, Panduan Pencarian, dan Petua
1 bulan yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7683

15

Tutorial Java

1639

14

Tutorial CakePHP

1393

52

Tutorial Laravel

1286

25

Tutorial PHP

1229

29

Tunjukkan Lagi

Related knowledge

Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

See all articles