CSS'de “.” Arasındaki fark nedir? ve bir stil kümesi bildirirken “#”?

Bir öğe için bir stil kümesi bildirmek arasındaki #ve .ne zaman arasındaki fark nedir ve hangisini kullanacağınıza karar verirken ortaya çıkan anlamlar nelerdir?

Evet, farklılar ...

#benzersiz bir kimliğe sahip tek bir belirli öğeyi hedeflemek için kullanılan bir kimlik seçici , ancak. belirli bir sınıfla birden çok öğeyi hedeflemek için kullanılan bir sınıf seçicidir . Başka bir deyişle:

• #foo {}bir öznitelikle bildirilen tek öğeye stil uygulayacakid="foo"
• .foo {}stil olacak tüm bir özelliği olan unsurları class="foo"(çok bir öğeye atanmış birden fazla sınıfları olabilir, sadece örneğin boşluklarla ayırın class="foo bar")

Tipik kullanımlar

Genel olarak konuşursak, # tuşunu yalnızca bir kez görüneceğini bildiğiniz bir şeyi şekillendirmek için kullanırsınız, örneğin kenar çubukları, afiş alanları vb.

Sınıflar, stilin tekrarlandığı yerlerde kullanılır; örneğin, hata mesajları için özel bir başlık formuna sahip olduğunuzu varsayarsanız, h1.error {}yalnızca<h1 class="error">

Özgünlük

Seçicilerin farklı olduğu bir diğer husus da özgüllükleridir - bir kimlik seçicinin sınıf seçiciden daha spesifik olduğu kabul edilir. Bu, stillerin bir öğe üzerinde çakıştığı durumlarda , daha spesifik seçiciyle tanımlananların daha az spesifik seçicileri geçersiz kılacağı anlamına gelir . Örneğin, ile <div id="sidebar" class="box">ilgili kurallar #sidebargeçersiz kılındığında.box

CSS seçicileri hakkında daha fazla bilgi edinin

CSS seçicilerinde daha büyük primerler için Seçici'ye bakın - inanılmaz derecede güçlüler ve anlayışınız basitçe "# DIV'ler için kullanılıyorsa", CSS'nin nasıl daha etkili kullanılacağını tam olarak okumak için iyi olur.

DÜZENLEME: Görünüşe göre Seçici gökyüzündeki büyük web sitesine gitmiş olabilir, bu yüzden bunun yerine bu arşiv bağlantısını deneyin .

#Eşleştiği anlamına gelir idbir elementin. .Sınıf adını belirtir:

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


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

Bir HTML belgesinde, id özelliğinin benzersiz olması gerektiğinden , belirli bir stile ihtiyaç duyan birden fazla öğeniz varsa, bir sınıf adı kullanmanız gerektiğini unutmayın.

Dot ( .) bir sınıf adını belirtirken, hash ( #) belirli bir id niteliğine sahip bir öğeyi belirtir . Sınıf, belirli bir sınıfla süslenmiş herhangi bir öğeye uygulanırken, # stili yalnızca söz konusu kimliğe sahip öğeye uygulanır.

Sınıf adı:

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

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

Adlandırılmış öğe:

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

<div id="name"></div>

Ayrıca, kademeli olarak bir id ( #) seçicinin ab ( ) seçiciden daha spesifik olduğunu belirtmek gerekir. . Bu nedenle, id ifadesindeki kurallar class ifadesindeki kuralları geçersiz kılar.

Örneğin, aşağıdaki ifadelerin her ikisi de:

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

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

aynı HTML öğesine uygulanır:

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

color: blue kural geçersiz kılar kırmızı: rengini kuralı.

Daha önce söylenenlere ilişkin birkaç hızlı uzantı ...

Bir idbenzersiz olmalıdır, ancak farklı stilleri daha spesifik hale getirmek için aynı kimliği kullanabilirsiniz.

Örneğin, bu HTML özeti göz önüne alındığında:

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

Bunlarla farklı stiller uygulayabilirsiniz:

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Bilmeniz gereken bir başka yararlı şey: Bir öğe üzerinde, boşlukları sınırlandırarak birden fazla sınıfınız olabilir ...

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

Bu, ve .menuöğelerini kullanarak belirli stillerle ortak stil sahibi olmanızı sağlar..main.menu.sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }

.class aşağıdaki öğeyi hedefler:

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

#class aşağıdaki öğeyi hedefler:

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

Kimliğin belge boyunca benzersiz olması ZORUNLUDUR, ancak herhangi bir sayıda öğe bir sınıfı paylaşabilir.

Hemen hemen herkesin belirttiği gibi:

Nokta ( .) bir sınıfı ve karma ( #) bir kimliği gösterir .

Arasındaki temel fark, sayfanızdaki bir sınıfı tekrar tekrar kullanabilmenizdir, oysa bir kimlik bir kez kullanılabilir. Tabii ki, WC3 standartlarına bağlı kalıyorsanız.

Aynı kimliğe sahip birden çok öğeniz varsa sayfa görüntülenmeye devam eder, ancak benzersiz olmadıkları için söz konusu öğeleri kimlikleriyle çağırarak dinamik olarak güncellemeye çalıştığınızda / karşılaştığınızda sorun yaşarsınız.

Kimlik özelliklerinin sınıf özelliklerinin yerine geçeceğini de not etmek yararlıdır.

# Bir kimlik seçici. Yalnızca eşleşen kimliğe sahip öğelerle eşleşir. Sonraki stil kuralı, id niteliğine sahip öğeyi "yeşil" değeriyle eşleştirir:

#green {color: green}

Daha fazla bilgi için http://www.w3schools.com/css/css_syntax.asp adresine bakın.

İşte kuralları açıklamak benim yaklaşımım .styleve #stylebir matrisin parçası. doğru sırada değilse, birbirlerini geçersiz kılabilir veya çakışmalara neden olabilirler.

İşte sıra.

Matris

#style 0,0,1,0 id

.style 0,1,0,0 class

Bu iki geçersiz kılmak istiyorsanız bir <style></style>cadı kullanabilirsiniz matris düzeyi veya 1,0,0,0. And @media sorgusu yukarıdaki her şeyi geçersiz kılar ... Bu konuda emin değilim ama kimlik seçici #bir sayfada sadece bir kez kullanılabilir düşünüyorum .