Cara yang betul untuk menggunakan pemilih CSS

Cara menggunakan pemilih CSS dengan betul

Pemilih CSS (Cascading Style Sheets) ialah alat penting untuk memilih dan menggunakan gaya pada elemen HTML. Penggunaan pemilih CSS yang betul boleh menjadikan gaya halaman web kami lebih tepat dan fleksibel. Berikut akan menerangkan secara terperinci cara menggunakan pemilih CSS dengan betul dan memberikan contoh kod khusus.

1. Pemilih asas

1. Pemilih elemen: Gunakan gaya dengan memilih nama teg bagi elemen HTML. Contohnya, untuk menetapkan warna fon kepada merah untuk semua elemen perenggan (p):

p {
  color: red;
}

2. Pemilih kelas: Gunakan gaya dengan memilih nama kelas elemen HTML. Pemilih kelas bermula dengan noktah (.) diikuti dengan nama kelas. Contohnya, untuk menetapkan warna latar belakang kepada kuning untuk semua elemen dengan nama kelas "intro":

.intro {
  background-color: yellow;
}

3. Pemilih ID: Gunakan gaya dengan memilih ID elemen HTML. Pemilih ID bermula dengan tanda paun (#), diikuti dengan nama ID. Contohnya, untuk menetapkan lebar kepada 200 piksel untuk elemen dengan nama ID "logo":

#logo {
  width: 200px;
}

2. Pemilih gabungan

1. Pemilih kanak-kanak: Gunakan gaya dengan memilih elemen anak elemen. Sub-pemilih menggunakan tanda yang lebih besar daripada (>). Contohnya, untuk menetapkan saiz fon kepada 14 piksel untuk semua elemen p di bawah elemen artikel:

article > p {
  font-size: 14px;
}

2. Pemilih turunan: Gunakan gaya dengan memilih unsur turunan unsur tersebut. Pemilih keturunan menggunakan ruang. Contohnya, untuk menetapkan warna fon kepada hijau untuk semua elemen p di bawah kelas elemen induk "bahagian":

.section p {
  color: green;
}

3. pemilih adik beradik bersebelahan: digunakan dengan memilih elemen adik beradik bersebelahan dengan gaya elemen. Pemilih adik beradik bersebelahan menggunakan tanda tambah (+). Contohnya, untuk menetapkan fon tebal untuk semua elemen p yang muncul selepas ID "pengepala":

#header + p {
  font-weight: bold;
}

4. Pemilih adik beradik am: Gunakan gaya dengan memilih semua elemen yang merupakan adik-beradik elemen. Pemilih adik beradik universal menggunakan tilde (~). Sebagai contoh, untuk menetapkan sempadan kepada garis pepejal 1 piksel untuk semua elemen div yang muncul selepas ID ialah "bar sisi":

#sidebar ~ div {
  border: 1px solid;
}

3. Pemilih atribut

1. Pemilih atribut [atribut]: dengan memilih elemen dengan yang ditentukan Atribut. Contohnya, untuk menetapkan garis bawah hiasan teks untuk semua elemen dengan atribut href:

a[href] {
  text-decoration: underline;
}

2. [attribute=value] Pemilih atribut: Menggunakan gaya dengan memilih elemen dengan atribut dan nilai atribut yang ditentukan. Contohnya, untuk menetapkan warna fon kepada biru untuk semua elemen yang nilai atribut sasarannya ialah "_blank":

a[target="_blank"] {
  color: blue;
}

3. [attribute^=value] Pemilih atribut: Dengan memilih elemen dengan nilai atribut bermula dengan yang ditentukan elemen nilai untuk menggunakan gaya. Contohnya, untuk menetapkan warna fon kepada merah untuk semua elemen yang nilai atribut hrefnya bermula dengan "http":

a[href^="http"] {
  color: red;
}

4. Pemilih kelas pseudo

Pemilih kelas pseudo boleh memilih keadaan atau kedudukan khas bagi unsur tersebut. Pemilih kelas pseudo biasa termasuk:hover, :active, :focus, dsb., yang digunakan untuk memilih elemen yang berada dalam keadaan alih tetikus, diaktifkan, fokus, dsb. Berikut ialah beberapa contoh pseudo-selector biasa:

1. : hover pseudo-selector: Memilih keadaan apabila tetikus melayang di atas elemen. Contohnya, untuk menukar warna pada tetikus untuk semua pautan:

a:hover {
  color: purple;
}

2. :nth-child(n) pseudo-class selector: Memilih elemen anak ke-n bagi sesuatu elemen. Contohnya, untuk menetapkan warna latar belakang untuk elemen dalam baris genap dalam senarai:

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

Di atas ialah beberapa penggunaan asas dan contoh pemilih CSS gaya.

Atas ialah kandungan terperinci Cara yang betul untuk menggunakan pemilih CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!