Pelbagai Jenis Pemilih CSS3-tutorial css-php.cn

Pelbagai Jenis Pemilih CSS3

Terdapat banyak jenis pemilih CSS3, yang boleh memilih elemen berdasarkan atribut elemen, perhubungan struktur atau keadaan yang berbeza. Berikut akan memperkenalkan beberapa jenis pemilih CSS3 yang biasa digunakan dan memberikan contoh kod khusus.

Pemilih asas:

Pemilih elemen: Gunakan nama elemen sebagai pemilih, berikut ialah elemen p sebagai contoh:
```
p { color: red; }
```
Salin selepas log masuk
Pemilih kelas: Gunakan nama kelas sebagai pemilih. , Di sini kita mengambil elemen yang kelasnya sebagai contoh sebagai contoh:
```
.example { font-size: 16px; }
```
Salin selepas log masuk
Pemilih ID: Gunakan ID sebagai pemilih, bermula dengan #, di sini kita mengambil elemen yang idnya ialah tajuk sebagai contoh:
```
#title { font-weight: bold; }
```
Salin selepas log masuk

Pemilih atribut:

[attr]: Pilih elemen dengan atribut tertentu, di sini ambil elemen dengan atribut data sebagai contoh:
```
[data] { background-color: yellow; }
```
Salin selepas log masuk
[attr=value]: Pilih elemen dengan atribut dan nilai yang ditentukan di sini ambil nilai atribut data Ambil elemen contoh sebagai contoh:
```
[data="example"] { color: blue; }
```
Salin selepas log masuk
[attr^=value]: Pilih elemen dengan nilai atribut bermula dengan nilai yang ditentukan Di sini, ambil elemen yang nilai atribut datanya bermula "ujian" sebagai contoh:
```
[data^="test"] { text-decoration: underline; }
```
Salin selepas log masuk

Pemilih struktur:

:nth-child(n): Pilih elemen anak ke-3 bagi elemen induk sebagai contoh:
```
.parent :nth-child(3) { background-color: green; }
```
Salin selepas log masuk
:first-child : Pilih elemen anak pertama bagi elemen induk Di sini kita mengambil elemen anak pertama bagi elemen induk sebagai contoh:
```
.parent :first-child { font-style: italic; }
```
Salin selepas log masuk

Pemilih kelas pseudo:

:hover: Pilih elemen semasa tetikus melayang Keadaan elemen, berikut ialah contoh menukar warna latar belakang apabila elemen dilegar:
```
.example:hover { background-color: orange; }
```
Salin selepas log masuk
:aktif: Pilih keadaan apabila elemen diaktifkan, berikut ialah contoh menukar warna teks apabila elemen diklik:
```
.example:active { color: purple; }
```
Salin selepas log masuk

Di atas ialah Beberapa jenis dan contoh kod pemilih CSS3, yang boleh membantu pembangun memilih dan mengawal gaya elemen dengan lebih fleksibel pada halaman tersebut. Dengan menguasai pemilih ini, anda boleh meningkatkan kecekapan pembangunan halaman dan pengalaman pengguna dengan berkesan.

Atas ialah kandungan terperinci Pelbagai Jenis Pemilih CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!