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.

1. Pemilih asas:

• Pemilih elemen: Gunakan nama elemen sebagai pemilih, berikut ialah elemen p sebagai contoh:

  p {
    color: red;
  }

• Pemilih kelas: Gunakan nama kelas sebagai pemilih. , Di sini kita mengambil elemen yang kelasnya sebagai contoh sebagai contoh:

  .example {
    font-size: 16px;
  }

• Pemilih ID: Gunakan ID sebagai pemilih, bermula dengan #, di sini kita mengambil elemen yang idnya ialah tajuk sebagai contoh:

  #title {
    font-weight: bold;
  }

2. Pemilih atribut:

• [attr]: Pilih elemen dengan atribut tertentu, di sini ambil elemen dengan atribut data sebagai contoh:

  [data] {
    background-color: yellow;
  }

• [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;
  }

• [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;
  }

3. Pemilih struktur:

• :nth-child(n): Pilih elemen anak ke-3 bagi elemen induk sebagai contoh:

  .parent :nth-child(3) {
    background-color: green;
  }

• :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;
  }

4. 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;
  }

• :aktif: Pilih keadaan apabila elemen diaktifkan, berikut ialah contoh menukar warna teks apabila elemen diklik:

  .example:active {
    color: purple;
  }

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!