Beberapa pemilih dalam css

CSS (Cascading Style Sheets) ialah bahasa gaya yang digunakan untuk mengawal gaya dan reka letak fail HTML dan XML. Dalam CSS, pemilih merujuk kepada corak yang digunakan untuk memilih elemen HTML. Pemilih ialah salah satu komponen CSS yang paling asas, yang boleh menggunakan gaya berbeza pada elemen berbeza untuk mengindahkan dan mengoptimumkan halaman web.

Terdapat banyak jenis pemilih dalam CSS, setiap satu dengan fungsi dan senario aplikasi yang berbeza. Dalam artikel ini, kami akan memperkenalkan beberapa pemilih biasa CSS untuk membantu pembaca menguasai asas CSS dengan lebih baik.

1. Pemilih teg

Pemilih teg merujuk kepada memilih nama elemen HTML sebagai pemilih, contohnya, untuk memilih semua perenggan, kita boleh menggunakan p sebagai pemilih :

p {
  color: red;
  font-size: 16px;
}

Kod di atas menetapkan warna fon semua perenggan kepada merah dan saiz fon kepada 16 piksel. Pemilih teg bagus untuk situasi di mana anda perlu menggunakan gaya yang sama pada semua elemen jenis yang sama dalam halaman web.

2. Pemilih kelas

Pemilih kelas merujuk kepada penggunaan titik (.) sebagai awalan, diikuti dengan nama kelas yang ditentukan sebagai pemilih, contohnya:

.button {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}

Kod di atas menetapkan warna latar belakang semua elemen dengan "butang" kelas kepada biru, warna fon kepada putih dan sempadan sudut bulat, dsb. Pemilih kelas sering digunakan untuk menentukan kumpulan elemen dengan gaya biasa.

3. Pemilih ID

Pemilih ID menggunakan tanda # sebagai awalan, diikuti dengan nama ID yang ditentukan sebagai pemilih, contohnya:

#header {
  background-color: gray;
  color: white;
  height: 100px;
}

Kod di atas menetapkan warna latar belakang elemen dengan ID "pengepala" kepada kelabu, warna fon kepada putih dan ketinggian elemen kepada 100 piksel. Pemilih ID hanya boleh digunakan untuk menentukan elemen tertentu kerana ID setiap elemen dalam HTML adalah unik.

4. Pemilih atribut

Pemilih atribut merujuk kepada penggunaan nama atribut dan nilai atribut yang disertakan dalam kurungan segi empat sama sebagai pemilih, contohnya:

a[href="https://www.google.com"] {
  color: blue;
  text-decoration: none;
}

The kod di atas menetapkan warna semua elemen hiperpautan dengan atribut href "https://www.google.com" kepada biru dan mengalih keluar garis bawah. Pemilih atribut boleh digunakan untuk memilih elemen dengan lebih tepat dan untuk menentukan gaya berdasarkan nilai atribut elemen.

5. Pemilih keturunan

Pemilih turunan merujuk kepada pemilih yang memilih dengan menyatakan hubungan hierarki antara elemen. Sebagai contoh, jika kita ingin memilih elemen p dalam elemen div, kita boleh menggunakan kod berikut:

div p {
  font-style: italic;
}

Kod di atas akan menetapkan semua elemen p dalam elemen div kepada condong. Pemilih keturunan juga boleh digunakan untuk memilih elemen tertentu dalam struktur bersarang.

6. Pemilih anak

Pemilih anak merujuk kepada pemilih yang memilih semua elemen anak langsung yang memenuhi syarat, iaitu format "elemen induk > anak unsur". Sebagai contoh, jika kita ingin memilih elemen anak langsung ul dalam semua elemen div dengan kelas "menu", kita boleh menggunakan kod berikut:

div.menu > ul {
  padding-left: 0;
}

Kod di atas akan memilih semua elemen div dengan kelas "menu" Jidar kiri (lapik-kiri) unsur anak langsung ul ditetapkan kepada 0. Pemilih anak mempunyai fungsi yang serupa dengan pemilih turunan, tetapi hanya digunakan pada elemen anak langsung.

Di atas ialah beberapa pemilih biasa dalam CSS Pemilih yang berbeza boleh memilih dan menggunakan gaya elemen yang berbeza mengikut keperluan yang berbeza. Diharapkan pembaca dapat menguasai pengetahuan asas CSS dengan lebih baik dengan memahami pemilih ini, supaya dapat menulis halaman web yang cantik dan stabil.

Atas ialah kandungan terperinci Beberapa pemilih dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!