Dalam CSS apa perbedaan antara "." dan "#" saat mendeklarasikan serangkaian gaya?

217

Apa perbedaan antara #dan .ketika mendeklarasikan serangkaian gaya untuk elemen dan apa semantik yang ikut bermain saat memutuskan mana yang akan digunakan?

Sam152
sumber

Jawaban:

336

Ya, mereka berbeda ...

#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")

Penggunaan khas

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">

Kekhususan

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 #sidebarmengganti aturan yang bertentangan untuk.box

Pelajari lebih lanjut tentang pemilih CSS

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.

Paul Dixon
sumber
2
Saya percaya bahwa sebagian besar browser akan, jika Anda (secara tidak valid) menentukan beberapa elemen dengan ID yang sama, menerapkan aturan dengan pemilih ID untuk semua elemen tersebut.
Miles
1
@Miles benar - saya pikir lebih akurat untuk mengatakan / # / menargetkan atribut "ID", dan /./menargetkan "kelas". Meskipun ID harus unik, mesin CSS tidak memvalidasi atau peduli.
Rex M
@Rex M - Bermanfaat meskipun diberikan elemen tunggal tidak dapat memiliki lebih dari satu id apakah itu unik atau tidak. Saya mencoba ini di bawah Firefox dan elemen dengan dua id diabaikan. Elemen dapat memiliki beberapa kelas.
Usagi
Apakah div.sidebar sama dengan div #sidebar?
Ali Gajani
Tautan Selectutorial buruk :(
Zeek2
28

The #berarti bahwa itu cocok dengan idelemen. The .menandakan nama kelas:

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>


#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

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.

nickf
sumber
10

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:

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Elemen bernama:

<style>
   #name { ... }
</style>

<div id="name"></div>
tvanfosson
sumber
"elemen bernama" menyesatkan
Bobby Jack
@ Bob - jadi apa Anda menyebutnya ketika Anda memberikan elemen id - 'id-ing' itu?
tvanfosson
Saya setuju dengan Bobby - elemen dapat memiliki nama dan juga id. Apa yang Anda sebut elemen seperti itu?
John McCollum
8

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:

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

diterapkan ke elemen HTML yang sama:

<h1 id="specials" class="headline">Today's Specials</h1>

yang warna: biru aturan akan menimpa warna: merah aturan.

Jans Carton
sumber
6

Beberapa ekstensi cepat tentang apa yang telah dikatakan ...

Sebuah idharus unik, tetapi Anda dapat menggunakan id yang sama untuk membuat gaya yang berbeda yang lebih spesifik.

Misalnya, diberikan ekstrak HTML ini:

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

Anda bisa menerapkan gaya berbeda dengan ini:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }


Hal lain yang berguna untuk diketahui: Anda dapat memiliki beberapa kelas pada suatu elemen, dengan membatasi ruang mereka ...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Yang memungkinkan Anda memiliki gaya umum .menudengan gaya tertentu menggunakan .main.menudan.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }
Peter Boughton
sumber
4

.class menargetkan elemen berikut:

<div class="class"></div>

#class menargetkan elemen berikut:

<div id="class"></div>

Perhatikan bahwa id HARUS unik di seluruh dokumen, sementara sejumlah elemen dapat berbagi kelas.

Bobby Jack
sumber
4

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.

Anders
sumber
2

# 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":

#green {color: green}

Lihat http://www.w3schools.com/css/css_syntax.asp untuk informasi lebih lanjut

tehvan
sumber
-2

Berikut ini adalah cara saya menjelaskan aturan .styledan #stylebagian dari sebuah matriks. bahwa jika tidak dalam urutan yang benar, mereka dapat saling menimpa, atau menyebabkan konflik.

Di sini adalah line up.

Matriks

#style 0,0,1,0 id

.style 0,1,0,0 class

jika Anda ingin mengesampingkan kedua ini, Anda dapat menggunakan <style></style>penyihir memiliki tingkat matriks atau 1,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.

Peter Gruppelaar
sumber