CSS seçicide sınıf ve kimlik nasıl birleştirilir?

221

Aşağıdaki div varsa:

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

" id='content'VE ile bir div" fikrini ifade eden bir stil tanımlamanın bir yolu var mı class='myClass'?

Yoksa şu şekilde olduğu gibi bir şekilde mi gidiyorsunuz?

<div class="content-sectionA">
    Lorem Ipsum...
</div>

Veya

<div id="content-sectionA">
    Lorem Ipsum...
</div>

css css-selectors

— Larsenal
kaynak

2

id ile seçim yapacaksanız, sınıfa göre seçmeye gerek yoktur, çünkü id benzersizdir, bu nedenle yalnızca bir öğe eşleşir. Sınıfı aynı seçiciye ekleyerek sadece fazladan yazmanız

— yeterlidir

21

@TStamper: Mutlaka değil. Sadece statik belgeler açısından düşünüyorsunuz. Burada img#Inbox, sayfanızda normalde% 50 opaklığa ayarlanmış bir simge olabilir . Ancak, kullanıcının bir mesajı olduğunda, iletinin% 100 opaklığa ayarlanmasını istersiniz ve arka uç active, öğeye bir sınıf ekleyerek bunu belirtir . Böyle bir senaryoda, hem kimliği hem de sınıf adını birleştiren bir seçiciye sahip olmak mantıklıdır.

— Lèse majesté

@TStamper: Ayrıca, daha spesifik id + sınıfı birleşik seçiciye sahip olmak, yalnızca id sürümüne göre daha fazla ağırlık / öncelik vermez mi? AFAIK, olmalı. (IOW, id + class combo selector kuralları, id combo selector kurallarını geçersiz kılar. (Bu konuyu şimdi

— bulmamın

Benzer bir durum yaşıyorum. Örneğin, açıklamaları olan ancak tek tek ürünler üzerinde belirli kontroller isteyen birçok ürünüm var, bu yüzden yapabilirim: code<p id = Product_1 class = Product> Product 1 </p> <p id = Product_2 class = Product> Product 2 </p> code Bu, tüm ürünlerin genel şekillendirilmesine izin vermekle birlikte belirli ürünler için bireysel şekillendirmeye de izin verir mi?

— Tamer Ziady

329

Stil sayfanızda:

div#content.myClass

Düzenleme: Bunlar da yardımcı olabilir:

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

ve örneğinize göre:

div#content.sectionA

Düzenleme, 4 yıl sonra: bu süper eski ve insanlar onu bulmaya devam beri: yok senin Seçicilerdeki tagNames kullanın. tagName, ihtiyacınız olmayan bir filtreleme adımı eklediğinden #content.myClassdaha hızlıdır div#content.myClass. Seçmenlerde tagNames'i yalnızca ihtiyacınız olan yerlerde kullanın!

— ajm
kaynak

31

Kimliğin bir div'a ait olduğunu belirtmek, bir kimlik zaten benzersiz olduğu için herhangi bir yararı olmadan yalnızca oluşturma performansına zarar verebilir (çok az da olsa). Temizlemek için # content.myClass ile giderdim.

— mystrdat

3

div.class#iddaha az tavsiye edilmesine rağmen eşdeğer olmalıdır; önce seçicinin daha benzersiz parçalarını kullanın.

— SF.

1

Yıllar sonra bile çabalarınız için teşekkürler :). Hala benim gibi adamlara yardım ediyor. Sadece projem için kullandım. Kesin oy verildi.

— C4d

76

Css arasında #header .calloutve #header.calloutiçinde farklılıklar vardır .

İşte "düz İngilizce" #header .callout:
Sınıf calloutkimliğine sahip öğenin torunları olan tüm öğeleri seçin header.

Ve şu #header.calloutanlama gelir:
Kimliğine headerve ayrıca sınıf adına sahip öğeyi seçin callout.

Daha fazlasını buradan okuyabilirsiniz css tricks

— Reza Abbasi
kaynak

Bu hatayı boşlukla yaptım: #id .class vs # id.class

— ERJAN

5

Bir öğede bir kimliği ve sınıfı birleştirmekle ilgili yanlış bir şey yoktur, ancak bunu bir kural için her ikisiyle de tanımlamanız gerekmez. Eğer gerçekten isterseniz:

#content.sectionA{some rules}

divDiğerlerinin önerdiği gibi kimliğin önünde yer almanıza gerek yoktur .

Genel olarak, o öğeye özgü CSS kuralları ID ile belirlenmelidir ve bunlar sadece sınıfın kurallarından daha fazla ağırlık taşır. Sınıf tarafından belirtilen kurallar, ayarlamanız gerektiğinde birden çok yerde değiştirmek istemediğiniz birden çok öğeye uygulanan özellikler olacaktır.

Bu kaynar:

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

Mantıklı olmak?

— Gabriel Hurley
kaynak

4

Genel olarak id ile belirtilen bir öğeyi sınıflandırmanıza gerek yoktur, çünkü id her zaman benzersizdir, ancak gerçekten ihtiyacınız varsa, aşağıdakilerin çalışması gerekir:

div#content.sectionA {
    /* ... */
}

— Blixt
kaynak

1

Sen edebilirsiniz CSS'deki kimliği ve Class birleştirmek, ancak kimlikleri yüzden aşırı hak edecek bir CSS seçicisi için bir sınıf ekleyerek, benzersiz olması amaçlanmıştır.

— Eric Wendelin
kaynak

İyi bir noktaya değindin. Belki çok genel sınıflar (float, yükseklik / genişlik, belki yazı tipi gibi şeyler ayarlama) bir dizi varsa ve bu benzersiz istisna içinde bir şey geçersiz kılmak istiyorum düşünüyorum?

— ajm

5

Farklı sayfalarla aynı stil sayfasını kullanmadığınız sürece. :-)

— Patrick McElhaney

5

Başka bir örnek: sınıflar Javascript ile dinamik olarak eklendiğinde (# isteğe

— bağlıFields.enabled

Farklı sayfalarla aynı stil sayfasını kullansanız bile, gövdeye bir sınıf koymak veya kimlik için bir stile sahip olmak ve daha sonra uygun geçersiz kılma stillerine sahip sınıflar için ayrı sınıf tanımları yapmak daha iyi olurdu.

— Eric Wendelin

Evet, bence bunu yapmak oldukça yaygın. örneğin li # SomeTab.state-seçilmiş

— Yablargo

1

kullanın: tag.id ; tag#classcss'nizdeki etiket değişkenlerinde.

— Lan ...
kaynak

1

Sanırım biraz karıştırdınız - tag.class ve tag # id, hayır?

— Harijs Krūtainis

0

Kimliklerin belge açısından benzersiz olması gerekir, bu nedenle her ikisine de göre seçim yapmanız gerekmez. Bununla birlikte, bir öğeye birden çok sınıf atayabilirsinizclass="class1 class2"

— Ben Hughes
kaynak

1

Sınıf değişebilir. Örneğin, div # id.active ve div # id.inactive olabilir.

— Daniel Moura

yeterince adil, düşünmeye gel, bu işlevselliği kullandım, ancak istenen davranışın ne olduğunu yanlış anladım.

— Ben Hughes

0

Bence hepiniz yanılıyorsunuz. Sınıflara karşı kimlikler bir özgüllük sorunu değildir; tamamen farklı mantıksal kullanımları vardır.

Kimlikler bir sayfanın belirli bölümlerini tanımlamak için kullanılmalıdır: başlık, gezinme çubuğu, ana makale, yazar ilişkilendirme, altbilgi.

Sınıflar sayfaya stil uygulamak için kullanılmalıdır. Diyelim ki genel bir dergi siteniz var. Sitedeki her sayfa aynı öğelere sahip olacak - üstbilgi, gezinme, ana makale, kenar çubuğu, altbilgi. Ancak derginizin farklı bölümleri var - ekonomi, spor, eğlence. Üç bölümün farklı görünümlere sahip olmasını istersiniz - ekonomi muhafazakar ve kare, spor eylemi, eğlence parlak ve genç.

Bunun için sınıflar kullanıyorsunuz. Birden fazla kimlik yapmak zorunda değilsiniz - # ekonomi-makale ve # spor-makale ve # eğlence-makale. Bu mantıklı değil. Bunun yerine, .economics, sports ve .entertainment olmak üzere üç sınıf tanımlarsınız, ardından her biri için #nav, #article ve #footer kimliklerini tanımlarsınız.

— Greg
kaynak

Bahsettiğiniz öğelerin çoğu için kimlikler yerine anlamsal HTML etiketleri kullanabilirsiniz. Üstbilgi, altbilgi, gezinme, bölüm vb. Etiketleri bir nedenden dolayı var.

— Walter Schwarz

Ancak gerçekten de kimlikleri yalnızca benzersiz olması gereken öğeler için kullanmalısınız, tek tonlar. Ancak o zaman bile, bu öğeye JavaScript aracılığıyla erişmeniz gerekiyorsa gerçekten yararlıdır, çünkü ID'leri kullanmak CSS'nizi çok daha spesifik ve daha sonra diğer CSS ve / veya HTML ile birleştirmek için zorlaştırır. Kimliklerin sınıflardan daha hızlı olduğu iddiası da var, ancak fark gerçekten ihmal edilebilir.

— Walter Schwarz

-1

.sectionA[id='content'] { color : red; }

Doküman html 4.01 olsa işe yaramaz ...

— BoltClock
kaynak