Apakah pemilih kelas pseudo hadapan?

Pemilih kelas pseudo bahagian hadapan termasuk:tuding, :aktif, :fokus, :anak pertama, :anak terakhir, :anak-anak(), :jenis-jenis() dan :bukan(), dll. Pengenalan terperinci: 1. Pemilih kelas pseudo :hover digunakan untuk menggunakan gaya apabila tetikus melayang di atas elemen Ia sering digunakan untuk mencipta kesan interaktif, seperti menukar warna atau latar belakangnya apabila tetikus melayang di atas pautan ; 2. :Pemilih kelas pseudo aktif digunakan untuk menggunakan gaya apabila elemen diaktifkan, dsb.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Pemilih kelas pseudo hadapan ialah bahagian yang sangat penting dalam CSS, mereka membenarkan kami memilih dan menggunakan gaya berdasarkan keadaan atau kedudukan elemen. Dalam artikel ini, kami akan memperkenalkan beberapa pemilih kelas pseudo hadapan biasa.

1. :legar pemilih kelas pseudo

:legar pemilih kelas pseudo digunakan untuk menggunakan gaya apabila tetikus melayang di atas elemen. Ia sering digunakan untuk mencipta kesan interaktif, seperti menukar warna atau latar belakang pautan apabila tetikus dituding di atasnya.

Contoh:

a:hover {
  color: blue;
}

2 :pemilih kelas pseudo aktif

:pemilih kelas pseudo aktif digunakan untuk menggunakan gaya apabila elemen diaktifkan. Ia sering digunakan untuk kesan klik pada butang atau pautan, seperti menukar warna atau latar belakang butang apabila pengguna mengkliknya.

Contoh:

button:active {
  background-color: yellow;
}

3 :pemilih kelas pseudo fokus

:pemilih kelas pseudo fokus digunakan untuk menggunakan gaya apabila elemen mendapat fokus. Ia sering digunakan pada elemen bentuk, seperti menukar warna sempadan atau latar belakang kotak input apabila pengguna mengklik padanya.

Contoh:

input:focus {
  border-color: red;
}

4 :pemilih kelas pseudo anak pertama

:pemilih kelas pseudo anak pertama digunakan untuk memilih elemen anak pertama bagi elemen induk. Ia sering digunakan untuk menggunakan gaya khas pada elemen pertama dalam senarai.

Contoh:

ul li:first-child {
  font-weight: bold;
}

5 :pemilih kelas pseudo anak terakhir

:pemilih kelas pseudo anak terakhir digunakan untuk memilih elemen anak terakhir bagi elemen induk. Ia sering digunakan untuk menggunakan gaya khas pada elemen terakhir dalam senarai.

Contoh:

ul li:last-child {
  color: red;
}

6. :nth-child() pseudo-class selector

:nth-child() pseudo-class selector digunakan untuk memilih elemen anak pada kedudukan tertentu elemen induk. Ia boleh menerima parameter yang menentukan kedudukan elemen anak untuk dipilih.

Contoh:

ul li:nth-child(odd) {
  background-color: lightgray;
}

7. :nth-of-type() pseudo-class selector

:nth-of-type() pseudo-class selector digunakan untuk memilih elemen anak bagi jenis elemen induk tertentu. Ia boleh menerima parameter yang menentukan kedudukan elemen anak untuk dipilih.

Contoh:

ul li:nth-of-type(2n) {
  color: blue;
}

8. :not() pseudo-class selector

:not() pseudo-class selector digunakan untuk memilih elemen yang tidak memenuhi syarat yang ditetapkan. Ia boleh menerima parameter yang menentukan elemen untuk dikecualikan.

Contoh:

input:not([type="text"]) {
  display: none;
}

Ini ialah pemilih kelas pseudo biasa di bahagian hadapan, mereka boleh membantu kami memilih dan menggunakan gaya berdasarkan keadaan atau kedudukan elemen. Dengan menggunakan pemilih kelas pseudo ini secara fleksibel, kami boleh menambahkan lebih banyak kesan interaktif dan gaya diperibadikan pada halaman web.

Atas ialah kandungan terperinci Apakah pemilih kelas pseudo hadapan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!