Kelas - Trik CSS

Anonim

Pemilih kelas dalam CSS bermula dengan titik (.), Seperti ini:

.class ( )

Pemilih kelas memilih semua elemen dengan atribut kelas yang sepadan.

Contohnya, elemen ini:

Push Me

dipilih dan digayakan seperti ini:

.big-button ( font-size: 60px; )

Anda boleh memberikan kelas apa sahaja nama yang diawali dengan huruf, tanda hubung (-), atau garis bawah (_). Anda boleh menggunakan nombor dalam nama kelas, tetapi nombor tidak boleh menjadi watak pertama atau watak kedua selepas tanda hubung. Kecuali anda menjadi gila dan mula melarikan diri dari pemilih, yang boleh menjadi pelik:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Elemen boleh mempunyai lebih daripada satu kelas:



 This paragraph will get styles from .intro and .blue selectors.

Elemen dengan beberapa kelas digayakan dengan peraturan CSS untuk setiap kelas. Anda juga boleh menggabungkan beberapa kelas untuk memilih elemen:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Demo ini menunjukkan bagaimana pemilih kelas tunggal berbeza dengan pemilih gabungan:

Anda juga boleh menghadkan pemilih kelas ke jenis elemen tertentu, yang kadang-kadang disebut "kelayakan tag":

ul.menu ( list-style: none; )

Kekhususan

Dengan sendirinya, pemilih kelas mempunyai nilai kekhususan 0, 0, 1, 0. Itu "lebih kuat" daripada pemilih elemen (seperti:) a ( )tetapi kurang kuat daripada pemilih ID (seperti #header ( )). Kekhususan meningkat apabila anda menggabungkan pemilih kelas atau menghadkan pemilih ke elemen tertentu.

Mengakses Kelas dengan JavaScript

Anda boleh membaca dan memanipulasi kelas elemen dengan menggunakan classListJavaScript. Contohnya, menambahkan kelas boleh seperti:

document.getElementById('italicize').classList.add('italic');

Demo ini menunjukkan contoh asas classListpenggunaan:

jQuery juga mempunyai kaedah untuk berinteraksi dengan kelas, termasuk .addClass(), .removeClass(), .toggleClass(), dan .hasClass().

Maklumat lanjut

  • Baca spesifikasi W3C untuk pemilih kelas.
  • Ketahui lebih lanjut mengenai nama kelas semantik.
  • Ketahui lebih lanjut mengenai kekhususan.
  • Ketahui mengenai perbezaan antara kelas dan ID.
  • Ketahui mengenai beberapa pemilih kelas dan kombo pemilih kelas / ID.
  • Ketahui mengenai API .classList.
  • Ketahui mengenai manipulasi kelas di jQuery.

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Sebarang Sebarang Sebarang Sebarang Sebarang Sebarang Sebarang