Rumah > Artikel > hujung hadapan web > Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci
Artikel yang menerangkan pemilih kelas pseudo keadaan UI dalam CSS secara terperinci
- 青灯夜游asal
- 2022-08-03 12:09:492598semak imbas
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 | 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样式
}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=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>Hasil larian adalah seperti yang ditunjukkan di bawah:
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=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>Hasil berjalan adalah seperti yang ditunjukkan di bawah: <.>
3. E:pemilih pautan
: Tentukan gaya pautan biasa atau tidak dilawati ; :link
<!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>Hasil yang dijalankan adalah seperti yang ditunjukkan di bawah: <.>
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=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>
: digunakan untuk menentukan gaya yang digunakan oleh elemen untuk dapatkan fokus kursor
:focus contoh Kod adalah seperti berikut:
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>选择器E:hover、E:active和E:focus</h1>
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.
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>E:enabled伪类选择器与E:disabled伪类选择器</h1>
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.
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>read-only伪类选择器与E:read-write伪类选择器</h1>
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.nbsp;html>
<meta>
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
<h1>checked伪类选择器</h1>
Pilihan lalai
nbsp;html>
<meta>
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
<h1>default伪类选择器</h1>
nbsp;html>
<meta>
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
<h1>indeterminate伪类选择器</h1>
Pemilih kelas pseudo E:selection digunakan untuk menentukan gaya apabila elemen dipilih .
nbsp;html>
<meta>
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
<h1>伪类选择器E::selection</h1>
<input>
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.
nbsp;html>
<meta>
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
11 E:memerlukan pemilih kelas pseudo dan E:pemilih kelas pseudo pilihan 1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。 12、E:in-range伪类选择器与E:out-of-range伪类选择器 1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。 各UI元素状态伪类选择器受浏览器的支持情况 （学习视频分享：web前端入门）
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>E:required伪类选择器与E:optional伪类选择器</h1>
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>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input>
选择器
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
√
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!
Artikel berkaitan
Lihat lagi- Mari kita bincangkan tentang 4 pemilih logik dalam CSS3 (permulaan pantas)
- Penjelasan terperinci tentang pemilih asas dalam CSS dan bercakap tentang keutamaan pemilih
- Apakah pemilih hierarki dalam CSS? Bagaimana cara menggunakannya?
- Pembelajaran pemilih pseudo CSS analisis pemilih elemen pseudo
- css pembelajaran pseudo-selector analisis pseudo-class selector