Apa perbedaan antara #
dan .
ketika mendeklarasikan serangkaian gaya untuk elemen dan apa semantik yang ikut bermain saat memutuskan mana yang akan digunakan?
sumber
Apa perbedaan antara #
dan .
ketika mendeklarasikan serangkaian gaya untuk elemen dan apa semantik yang ikut bermain saat memutuskan mana yang akan digunakan?
#
adalah pemilih id , digunakan untuk menargetkan satu elemen tertentu dengan id yang unik, tapi. adalah pemilih kelas yang digunakan untuk menargetkan beberapa elemen dengan kelas tertentu. Dengan kata lain:
#foo {}
akan menata elemen tunggal yang dideklarasikan dengan atributid="foo"
.foo {}
akan menata semua elemen dengan atribut class="foo"
(Anda dapat memiliki beberapa kelas yang ditugaskan untuk elemen juga, cukup pisahkan dengan spasi, misalnya class="foo bar"
)Secara umum, Anda menggunakan # untuk menata sesuatu yang Anda tahu hanya akan muncul sekali, misalnya, hal-hal seperti div tata letak tingkat tinggi seperti bilah sisi, area spanduk dll.
Kelas-kelas digunakan di mana gaya diulangi, misalnya misalnya Anda mengepalai bentuk khusus tajuk untuk pesan kesalahan, Anda bisa membuat gaya h1.error {}
yang hanya akan berlaku untuk<h1 class="error">
Aspek lain di mana penyeleksi berbeda dalam kekhususannya - pemilih id dianggap lebih spesifik daripada pemilih kelas. Ini berarti bahwa ketika gaya bertentangan pada suatu elemen, elemen yang didefinisikan dengan pemilih yang lebih spesifik akan menimpa pemilih yang kurang spesifik. Misalnya, diberi <div id="sidebar" class="box">
aturan apa pun untuk #sidebar
mengganti aturan yang bertentangan untuk.box
Lihat Selectutorial untuk primer yang lebih baik tentang penyeleksi CSS - mereka sangat kuat, dan jika konsepsi Anda hanya bahwa "# digunakan untuk DIVs" Anda sebaiknya membaca dengan tepat tentang cara menggunakan CSS secara lebih efektif.
EDIT: Sepertinya Selectutorial mungkin telah pergi ke situs web besar di langit, jadi coba tautan arsip ini sebagai gantinya.
The
#
berarti bahwa itu cocok denganid
elemen. The.
menandakan nama kelas:Perhatikan bahwa dalam dokumen HTML, atribut id harus unik , jadi jika Anda memiliki lebih dari satu elemen yang membutuhkan gaya tertentu, Anda harus menggunakan nama kelas.
sumber
Titik (
.
) menandakan nama kelas sedangkan hash (#
) menandakan elemen dengan atribut id tertentu . Kelas akan berlaku untuk elemen apa pun yang didekorasi dengan kelas tertentu, sedangkan gaya # hanya akan berlaku untuk elemen dengan id tertentu.Nama kelas:
Elemen bernama:
sumber
Perlu dicatat juga bahwa dalam kaskade , pemilih id (
#
) lebih spesifik daripada.
pemilih ab ( ). Oleh karena itu, aturan dalam pernyataan id akan mengesampingkan aturan dalam pernyataan kelas.Misalnya, jika kedua pernyataan berikut:
diterapkan ke elemen HTML yang sama:
yang warna: biru aturan akan menimpa warna: merah aturan.
sumber
Beberapa ekstensi cepat tentang apa yang telah dikatakan ...
Sebuah
id
harus unik, tetapi Anda dapat menggunakan id yang sama untuk membuat gaya yang berbeda yang lebih spesifik.Misalnya, diberikan ekstrak HTML ini:
Anda bisa menerapkan gaya berbeda dengan ini:
Hal lain yang berguna untuk diketahui: Anda dapat memiliki beberapa kelas pada suatu elemen, dengan membatasi ruang mereka ...
Yang memungkinkan Anda memiliki gaya umum
.menu
dengan gaya tertentu menggunakan.main.menu
dan.sub.menu
sumber
.class
menargetkan elemen berikut:#class
menargetkan elemen berikut:Perhatikan bahwa id HARUS unik di seluruh dokumen, sementara sejumlah elemen dapat berbagi kelas.
sumber
Seperti hampir semua orang telah menyatakan:
Periode (
.
) menunjukkan kelas , dan hash (#
) menunjukkan ID .Perbedaan mendasar antara keduanya adalah Anda dapat menggunakan kembali suatu kelas pada halaman Anda berulang kali, sedangkan ID dapat digunakan satu kali. Itu, tentu saja, jika Anda berpegang teguh pada standar WC3.
Halaman masih akan merender jika Anda memiliki beberapa elemen dengan ID yang sama, tetapi Anda akan mengalami masalah jika / ketika Anda mencoba memperbarui elemen tersebut secara dinamis dengan memanggil mereka dengan ID mereka, karena mereka tidak unik.
Penting juga untuk dicatat bahwa properti ID akan menggantikan properti kelas.
sumber
# Adalah pemilih id. Ini hanya cocok dengan elemen dengan id yang cocok. Aturan gaya berikutnya akan cocok dengan elemen yang memiliki atribut id dengan nilai "hijau":
Lihat http://www.w3schools.com/css/css_syntax.asp untuk informasi lebih lanjut
sumber
Berikut ini adalah cara saya menjelaskan aturan
.style
dan#style
bagian dari sebuah matriks. bahwa jika tidak dalam urutan yang benar, mereka dapat saling menimpa, atau menyebabkan konflik.Di sini adalah line up.
Matriks
jika Anda ingin mengesampingkan kedua ini, Anda dapat menggunakan
<style></style>
penyihir memiliki tingkat matriks atau1,0,0,0.
Dan @media permintaan akan menimpa segala sesuatu di atas ... Saya tidak yakin tentang ini tetapi saya pikir pemilih ID#
hanya dapat digunakan sekali dalam satu halaman.sumber