Sınıfları eşleştirmek için neden bir öznitelik seçici kullanmalı?

Aşağıdakiler gibi CSS seçicilerin bulunduğu bir duyarlı e-posta şablonu örneği buldum :

a[class="btn"]

Bu sözdizimi aşağıdakilerle tamamen aynıysa neden kullanılır:

a.btn

Mobil tarayıcılar veya başka herhangi bir şey üzerinde herhangi bir etkisi var mı?

css css-selectors

— ducin
kaynak

@Jevgeni Bogatyrjov: Bu tamamen farklı bir soru, hatta CSS ile ilgili bile değil, ancak yanlış başlık nedeniyle ne kadar kafa karıştırıcı olabileceğini görebiliyorum. Ben düzenledim.

— BoltClock

144

[]Sözdizimi bir olan özellik seçici .

a[class="btn"]

Bu, <a>ile herhangi bir etiketi seçecektir class="btn". Ancak, hangisinin sahip olduğunu seçmez , örneğin (oysa olur). Yalnızca bu öznitelikle tam olarak eşleşir .<a>class="btn btn_red"a.btn

Ezberlemeniz Gereken 30 CSS Seçiciyi okumak isteyebilirsiniz . Gelecek vadeden web geliştiricileri için paha biçilmezdir.

— Eric
kaynak

ama duyarlılıkla ilgisi yok, saf CSS sözdizimi, değil mi?

— ducin

Aynı öğreticiye de rastladım ( campaignmonitor.com/guides/mobile/coding ) - bu tekniği bir eğitimde kullanmaları garip görünüyor. Eğitimler, yeni başlayanlar için işleri mümkün olduğunca netleştirmelidir. Özellikle de ortak .btnseçici yeterli olduğunda. Bir şey mi özlüyorum? Bunun herhangi bir faydası var mı? Daha fazla özgüllük tahmin ediyorum?

— nickspiel

jQuery ve köşeli parantez kullanarak tüm sınıf adlarını seçmenin yeni bir yolu yok mu? $ (This) .css ("[class ~ = 'btn_']", "red"); Sözdizimi yanlış olabilir, ancak doğru sözdiziminin ne olduğunu biliyor musunuz?

— whyoz

@whyoz aradığını düşünüyorum [class^='btn_'].

— Eric

Cevabınızı diğer öznitelik seçicilerini de gösterecek şekilde güncellemeniz harika olur. "Css seçici köşeli parantez" araması, bu soruyu bir aramada getirir ve diğer varyasyonları ("css seçici köşeli parantez yıldız") aramak zordur.

— cimmanon