Pemilih Kelas (pemilih CSS)

3

sintaks

Keterangan Memilih elemen berdasarkan nama kelas mereka adalah teknik yang sangat biasa dalam CSS. Sintaks pemilih atribut [kelas ~ = "amaran"] agak janggal, tetapi bersyukur ada bentuk yang lebih mudah dan lebih pendek untuknya: pemilih kelas. Berikut adalah contoh mudah yang memilih semua elemen dengan atribut kelas yang mengandungi nilai "amaran":

Contoh ini juga menggambarkan penggunaan pemilih sejagat tersirat -setara dengan *. Perhatikan bahawa aksara Whitespace tidak boleh muncul selepas tempoh itu, atau antara pemilih jenis elemen, atau pemilih sejagat yang jelas, dan tempoh tersebut. Contohnya, pemilih berikut akan sepadan dengan semua elemen P dengan atribut kelas yang mengandungi nilai "Amaran ":

Pemilih mudah mungkin mengandungi lebih daripada satu pemilih atribut dan/atau pemilih kelas; Dalam kes sedemikian, corak pemilih sepadan dengan unsur -unsur yang atributnya mengandungi

semua

.className {
declaration block
}

komponen yang ditentukan. Inilah contoh:

Pemilih contoh pertama di atas sepadan dengan elemen div yang nilai atribut kelasnya mengandungi kedua -dua perkataan "foo" dan "bar". Contoh kedua pemilih sepadan dengan elemen div yang nilai atribut kelasnya mengandungi kedua -dua perkataan "foo" dan "bar", dan nilai atribut tajuk bermula dengan rentetan "bantuan". Untuk menjelaskan lebih lanjut HTML yang akan sepadan dengan pemilih CSS di atas mungkin seperti berikut:

.warning {
  ⋮ <span>declarations
</span>}

Contoh

p.warning {
  ⋮ <span>declarations
</span>}

Pemilih berikut akan sepadan dengan semua elemen P dengan atribut kelas yang mengandungi nilai "intro":

div.foo.bar {
  ⋮ <span>declarations
</span>}
div.foo.bar[title^="Help"] {
  ⋮ <span>declarations
</span>}

<div >Matches first example</div>
<div  title="Help">Matches second example</div>

soalan yang sering ditanya mengenai pemilih kelas CSS

Apakah kepentingan pemilih kelas CSS?

Pemilih kelas CSS adalah nama yang diberikan kepada gaya tertentu dalam fail CSS. Ia memainkan peranan penting dalam pembangunan web kerana ia membolehkan pemaju menggunakan gaya yang sama untuk pelbagai elemen HTML. Ini bukan sahaja memastikan konsistensi dalam reka bentuk tetapi juga menjimatkan masa kerana pemaju tidak perlu menulis kod yang sama berulang kali. Pemilih kelas ditakrifkan dengan tempoh yang diikuti oleh nama kelas. Sebagai contoh, .intro {color: blue;}. Dalam kes ini, 'intro' adalah pemilih kelas.

p.intro {
  ⋮ <span>declarations
</span>}

Bagaimana saya menggunakan pemilih kelas CSS dalam html?

Nama ke elemen HTML menggunakan atribut 'Kelas'. Sebagai contoh, jika anda mempunyai pemilih kelas bernama 'Intro' dalam fail CSS anda, anda boleh memohon kepada perenggan dalam html seperti ini:

Ini adalah perenggan pengenalan.

. Gaya yang ditakrifkan dalam kelas 'intro' akan digunakan untuk perenggan ini.

Bolehkah saya menggunakan pemilih kelas berganda untuk satu elemen HTML? Anda hanya perlu memisahkan setiap nama kelas dengan ruang dalam atribut 'kelas' dalam HTML. Sebagai contoh,

ini adalah perenggan pengantar yang diketengahkan.

. Dalam kes ini, gaya yang ditakrifkan dalam kelas 'intro' dan 'sorotan' akan digunakan untuk perenggan.

Apakah perbezaan antara pemilih kelas dan pemilih ID dalam CSS?

Perbezaan utama antara pemilih kelas dan pemilih ID dalam CSS terletak pada penggunaannya. Walaupun pemilih kelas boleh digunakan untuk gaya elemen HTML berganda, pemilih ID digunakan untuk gaya satu elemen unik. Juga, pemilih kelas ditakrifkan dengan tempoh (.) Sebelum nama kelas, sedangkan pemilih ID ditakrifkan dengan hash (#) sebelum nama ID. 🎜>

Ya, pemilih kelas CSS boleh digabungkan dengan pemilih lain untuk menargetkan elemen tertentu. Sebagai contoh, anda boleh menggunakan pemilih kelas dengan pemilih elemen untuk gaya elemen jenis tertentu dalam kelas. Sebagai contoh, p.intro {color: blue;} akan menggunakan gaya hanya untuk elemen perenggan dalam kelas 'intro'. 🎜> Jika terdapat gaya yang bercanggah dalam pemilih kelas CSS anda, pelayar akan mengikuti kekhususan CSS dan peraturan warisan untuk menyelesaikan konflik. Secara umum, gaya yang ditakrifkan kemudian dalam fail CSS akan mengatasi yang terdahulu. Walau bagaimanapun, pemilih yang lebih spesifik akan mempunyai keutamaan yang lebih tinggi.

Bagaimana saya boleh mengatasi gaya dalam pemilih kelas CSS? fail atau menggunakan pemilih yang lebih spesifik. Cara lain ialah menggunakan peraturan 'penting'. Dengan menambah '! Penting' selepas gaya, anda boleh memberikan keutamaan yang lebih tinggi. Walau bagaimanapun, gunakan peraturan ini dengan berhati -hati kerana ia boleh menjadikan CSS anda sukar untuk dikendalikan. unsur -unsur. Kaedah 'Document.getElementsByClassName ()' membolehkan anda memilih elemen dengan nama kelas tertentu. Anda kemudian boleh menukar gaya, kandungan, atau atribut mereka menggunakan pelbagai kaedah JavaScript. Pemilih, ia adalah amalan yang baik untuk menggunakan nama deskriptif dan ringkas. Juga, nama kelas adalah sensitif kes dan tidak boleh bermula dengan nombor. Anda boleh menggunakan tanda hubung (-) atau garis bawah (_) untuk memisahkan kata-kata dalam nama kelas.

Bolehkah saya menggunakan pemilih kelas CSS dalam reka bentuk responsif?

Ya, pemilih kelas CSS boleh digunakan dalam reka bentuk responsif untuk menggunakan gaya yang berbeza berdasarkan saiz skrin atau peranti. Dengan menggabungkan pemilih kelas dengan pertanyaan media, anda boleh membuat susun atur responsif yang menyesuaikan diri dengan persekitaran tontonan yang berbeza.

Atas ialah kandungan terperinci Pemilih Kelas (pemilih CSS). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!