Cara menggunakan pemilih css

Pemilih CSS (Cascading Style Sheet) ialah alat untuk memilih elemen HTML. Pemilih CSS membolehkan anda menggayakan elemen HTML berdasarkan jenis, atribut, ID atau kelasnya. Pemilih adalah asas CSS, dan menguasainya merupakan langkah penting dalam menguasai CSS.

Artikel ini akan memperkenalkan pemilih CSS yang biasa digunakan dan penggunaannya. Sebelum anda bermula, anda perlu memahami beberapa pengetahuan asas:

1. Sintaks pemilih CSS: pemilih menghala ke elemen HTML, diikuti dengan sepasang pendakap kerinting {}, dan di dalam pendakap kerinting ialah set pasangan atribut dan nilai , dipisahkan dengan koma bertitik.
2. Elemen HTML boleh menggunakan nama teg, nama kelas (id) dan atribut sebagai pemilih. Elemen
3. boleh mempunyai berbilang nama kelas, dipisahkan dengan ruang.
4. Nama ID dan kelas mesti mengikut peraturan penamaan, seperti tidak bermula dengan nombor, tidak mengandungi aksara khas, dsb.

Sekarang mari kita ketahui lebih lanjut tentang beberapa pemilih CSS dan cara menggunakannya.

1. Pemilih Teg

Pemilih teg ialah pemilih CSS yang paling mudah. Ia menggunakan nama tag bagi elemen HTML untuk menetapkan gaya. Pemilih teg digunakan pada semua elemen teg ini.

Sebagai contoh, untuk menetapkan warna teks merah untuk semua perenggan (p), anda boleh menggunakan kod berikut:

p {
  color: red;
}

2. Pemilih kelas

Pemilih kelas memilih elemen dengan menambahkan nama kelas pada teg. Nama kelas bermula dengan simbol "."

Sebagai contoh, kod berikut akan menetapkan warna teks kepada merah untuk semua elemen menggunakan nama kelas "my-class":

.my-class {
  color: red;
}

Dalam HTML, atribut kelas boleh digunakan kepada mana-mana elemen. Berikut ialah contoh:

<div class="my-class">我是一个含有my-class类名的div元素</div>

3. Pemilih ID

Pemilih ID memilih elemen dengan menambahkan nama ID dalam teg. Nama ID bermula dengan simbol "#".

Sebagai contoh, kod berikut akan menetapkan warna teks elemen dengan ID "my-id" kepada biru:

#my-id {
  color: blue;
}

Dalam HTML, atribut id hanya boleh digunakan kepada satu elemen. Berikut ialah contoh:

<div id="my-id">我是一个含有my-id ID名称的div元素</div>

4. Pemilih Atribut

Pemilih atribut menetapkan gaya berdasarkan atribut elemen HTML. Mereka membenarkan akses kepada sifat elemen menggunakan kurungan segi empat sama [].

Sebagai contoh, kod berikut akan menetapkan warna teks kepada hijau untuk semua elemen dengan atribut "href":

a[href] {
  color: green;
}

Selain itu, anda boleh menggunakan nilai atribut untuk menetapkan gaya lebih berbutir. Sebagai contoh, kod berikut akan menetapkan warna teks kepada merah untuk semua pautan yang nilai atribut "href"nya berakhir dengan ".pdf":

a[href$=".pdf"] {
  color: red;
}

Dalam kod di atas, simbol "$=" mewakili nilai atribut Tamat dengan nilai tertentu.

5. Pemilih Keturunan

Pemilih Keturunan menetapkan gaya dengan memilih elemen anak unsur induk. Ia menggunakan ruang untuk memisahkan setiap nama tag.

Sebagai contoh, kod berikut akan menetapkan elemen dalam semua elemen div kepada hijau:

div a {
  color: green;
}

Dalam kod di atas, aksara ruang menyambungkan elemen div dan elemen a kepada antara satu sama lain.

6. Pemilih Persimpangan

Pemilih Persimpangan memilih elemen dengan kedua-dua nama kelas dan nama teg yang ditentukan. Ia ditakrifkan menggunakan "." dan nama tag.

Sebagai contoh, kod berikut akan menetapkan warna teks kepada biru untuk semua elemen dengan nama kelas "kelas saya" dan nama teg "li":

li.my-class {
  color: blue;
}

Dalam kod di atas, Pemilih "li.my-class" hanya digunakan pada elemen dengan kedua-dua nama kelas "li" dan "my-class".

Ringkasan:

Setakat ini, kami telah mempelajari tentang 6 pemilih CSS yang biasa digunakan. Memahami pemilih akan membantu anda meletakkan kedudukan yang lebih baik dan membangunkan gaya untuk elemen HTML. Pemilih yang berbeza memerlukan struktur HTML yang berbeza, jadi kita perlu memilih pemilih yang sesuai mengikut keperluan sebenar.

Pemilih CSS ialah titik pengetahuan yang sangat penting dalam CSS Bagi pembangun bahagian hadapan, menguasainya adalah langkah yang sangat penting. Harap artikel ini dapat membantu anda.

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