Berapakah jenis pemilih css yang ada?

Pemilih CSS ialah corak yang digunakan untuk memilih elemen dalam dokumen HTML atau XML. Ia membenarkan pembangun mendapatkan elemen dalam halaman melalui pemilih seperti nama kelas, ID, nama teg, dsb., dengan itu mengubah gaya, tingkah laku dan kandungan elemen. Dalam CSS, pemilih adalah salah satu konsep yang paling kritikal dan teras CSS. Artikel ini akan memperkenalkan jenis pemilih CSS secara terperinci.

1. Pemilih Teg

Pemilih CSS yang paling asas ialah pemilih teg, yang memilih elemen berdasarkan teg HTML. Sebagai contoh, pemilih CSS berikut akan memilih semua perenggan dalam HTML:

p {
  color: red;
}

2. Pemilih ID

Pemilih ID adalah berdasarkan ID unik elemen HTML Pilih elemen. Dalam HTML, ID setiap elemen hendaklah unik. Sebagai contoh, pemilih CSS berikut memilih elemen dengan ID "elemen saya":

#my-element {
  background-color: yellow;
}

3. Pemilih kelas

Pemilih kelas membenarkan kami memilih elemen berdasarkan pada atribut kelas untuk memilih elemen. Dalam HTML, berbilang elemen boleh menggunakan nama kelas yang sama. Sebagai contoh, pemilih CSS berikut akan memilih semua elemen dalam HTML dengan kelas "kelas saya":

.my-class {
  font-size: 16px;
}

4. Pemilih adik beradik bersebelahan

Pemilih adik beradik pilih elemen berdasarkan adik-beradik yang mengikut elemen yang ditentukan. Contohnya, pemilih CSS berikut akan memilih semua elemen p serta-merta mengikut elemen h1:

h1 + p {
  color: blue;
}

5. Pemilih Elemen Kanak-kanak

Pemilih Elemen Kanak-kanak Pilih Elemen anak langsung daripada elemen yang ditentukan. Sebagai contoh, pemilih CSS berikut akan memilih semua elemen anak langsung li dalam elemen ul:

ul > li {
  list-style: none;
}

6. Pemilih turunan

Pemilih keturunan akan memilih elemen yang ditentukan semua unsur keturunan di bawah. Contohnya, pemilih CSS berikut akan memilih semua elemen li di bawah elemen div:

div li {
  color: purple;
}

7. Pemilih kad liar

Pemilih kad liar sepadan dengan semua elemen dalam dokumen HTML unsur. Contohnya, pemilih CSS berikut akan memilih setiap elemen dalam HTML:

* {
  margin: 0;
  padding: 0;
}

8. Pemilih atribut

Pemilih atribut memilih elemen mengikut elemen nilai atributnya. Sebagai contoh, pemilih CSS berikut akan memilih semua elemen yang atribut kelasnya mengandungi "saya":

[class*="my"] {
  background-color: green;
}

Ringkasan:

Pemilih CSS boleh berdasarkan teg, kelas, ID dalam dokumen HTML , atribut dan ciri lain untuk memilih elemen dan mengubah suai gayanya. Artikel ini memperkenalkan 8 pemilih CSS yang biasa digunakan yang boleh digunakan untuk menyelesaikan masalah gaya biasa. Adalah penting untuk ambil perhatian bahawa menggunakan pemilih CSS dengan betul boleh menjadikan kod CSS pembangun lebih ringkas dan jelas.

Atas ialah kandungan terperinci Berapakah jenis pemilih css yang ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!