Apakah pemilih yang terdapat dalam CSS?

CSS ialah bahasa helaian gaya yang digunakan untuk reka bentuk web, yang boleh digunakan untuk mengawal penampilan dan reka letak halaman web. Pemilih ialah salah satu bahagian CSS yang paling penting, yang boleh membantu kami mencari elemen HTML yang ingin kami ubah gayanya. Artikel ini akan memperkenalkan secara terperinci jenis pemilih yang biasa digunakan dalam CSS.

1. Pemilih asas

<li>Pemilih teg: Pilih elemen mengikut nama teg HTML.

Contohnya:

p {
  color: red;
}

Kod di atas akan menukar warna teks semua <p></p> elemen dalam dokumen HTML kepada merah.

<li>Pemilih kelas: Pilih satu atau lebih elemen melalui atribut kelas.

Contohnya:

.blue {
  color: blue;
}

Kod di atas akan menukar warna teks semua elemen dengan atribut kelas "blue" kepada biru.

<li>Pemilih ID: Pilih elemen unik melalui atribut id.

Contohnya:

#header {
  width: 100%;
}

Kod di atas akan melaraskan lebar elemen dengan atribut id "header" kepada 100%.

2. Pemilih gabungan

<li>Pemilih keturunan: memilih unsur keturunan.

Contohnya:

header nav {
  background-color: blue;
}

Kod di atas akan menukar warna latar belakang semua <header></header> elemen di bawah elemen <nav></nav> kepada biru.

<li>Pemilih elemen kanak-kanak: Pilih elemen kanak-kanak.

Contohnya:

ul > li {
  font-size: 16px;
}

Kod di atas akan menetapkan saiz fon semua elemen anak langsung <ul></ul> dalam elemen <li> kepada 16 piksel.

3. Pemilih atribut

<li>Pemilih atribut: Pilih elemen mengikut nama atribut.

Contohnya:

a[href="https://www.example.com"] {
  color: green;
}

Kod di atas akan menetapkan warna semua elemen utama yang dipautkan ke https://www.example.com kepada hijau.

<li>Pemilih wujud: memilih semua elemen yang mengandungi atribut ini.

Contohnya:

input[type="text"] {
  background-color: #f2f2f2;
}

Kod di atas akan menetapkan warna latar belakang semua "text" elemen dengan atribut jenis <input> kepada putih pudar.

4. Pemilih kelas Pseudo

<li>Pautkan kelas pseudo: Pilih elemen berdasarkan sama ada ia adalah pautan.

Contohnya:

a:hover {
  color: red;
}

Kod di atas akan menetapkan warna semua pautan kepada merah pada tetikus.

<li>Fokus kelas pseudo: Memilih elemen berdasarkan sama ada pengguna telah menetapkan fokus kepada elemen.

Contohnya:

input:focus {
  border: 2px solid green;
}

Kod di atas akan menetapkan warna sempadan elemen <input> kepada hijau apabila pengguna menetapkan fokus.

5. Pemilih unsur Pseudo

<li>::sebelum dan ::selepas: Masukkan kandungan yang dijana sebelum atau selepas kandungan elemen yang dipilih.

Contohnya:

h1::before {
  content: ">> ";
}

Kod di atas akan memasukkan kandungan dengan dua lebih besar daripada tanda di hadapan semua <h1></h1> elemen.

<li>::huruf pertama dan ::baris pertama: Pilih huruf pertama atau baris pertama teks elemen.

Contohnya:

p::first-letter {
  font-size: 20px;
}

Kod di atas akan menetapkan saiz fon huruf pertama setiap elemen <p></p> kepada 20 piksel.

Ringkasan:

Di atas ialah jenis pemilih yang biasa digunakan dalam CSS, yang melaluinya halaman web boleh memaparkan pelbagai gaya dengan lebih baik. Dalam reka bentuk web sebenar, kita boleh memilih pemilih yang berbeza untuk digunakan mengikut situasi sebenar untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci Apakah pemilih yang terdapat dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!