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

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

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.

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.

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>

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.

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
{ ... }

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

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.

# 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

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.