CSS seçicilerindeki sınıf adları büyük / küçük harfe duyarlı mı?

229

CSS'nin büyük / küçük harfe duyarlı olmadığı her yerde okumaya devam ediyorum, ancak bu seçiciye sahibim

.holiday-type.Selfcatering

HTML’imde kullandığımda, bunun gibi,

<div class="holiday-type Selfcatering">

Yukarıdaki seçiciyi böyle değiştirirsem

.holiday-type.SelfCatering

O zaman stil alınmaz.

Birisi yalan söylüyor.

html css css-selectors

— Sachin Kainth
kaynak

55

Bu hikayenin ahlakı her zaman büyük / küçük harfe duyarlıdır - ileri geri zekice zıplatma. Kodunuzun okunmasının daha kolay olduğunu göreceksiniz ve kalanlarınızı alan herkes bunu takdir edecektir.

— kingdango

3

Bundan sonra büyük / küçük harfe duyarlı davranıyorum. class = "Price" çalışmıyor, class = "price" çalışıyor, bu yüzden pratik bir günlük anlamda büyük / küçük harfe duyarlı.

— Tino Mclaren

4

Bkz tam "Vaka matris" , içinde küçük harf duyarlılığı hakkında özelliklerin değerleri ve seçicileri .

— Peter Krauss

5

Komik bir şey, sınıf adımda sürekli olarak camelCase kullanıyordum, ancak CSS iOS web görünümünde bunu almadı. Yani ahlaki, her zaman sınıflar için tire kullanır.

— EpicPandaForce

242

CSS seçicileri genellikle büyük / küçük harfe duyarlı değildir; buna sınıf ve kimlik seçicileri de dahildir.

Ancak HTML sınıfı adları büyük / küçük harfe duyarlıdır (özellik tanımına bakın) ve bu, ikinci örneğinizde uyuşmazlığa neden olur. Bu HTML5'te değişmedi . ¹

Bunun nedeni, seçicilerin büyük / küçük harfe duyarlılığının belge dilinin söylediklerine bağlı olmasıdır :

Seçicilerin kontrolü altında olmayan parçalar haricinde, tüm Seçiciler sözdizimi ASCII aralığı içinde büyük / küçük harfe duyarlı değildir (yani [az] ve [AZ] eşdeğerdir). Seçicilerdeki belge dili öğesi adlarının, nitelik adlarının ve nitelik değerlerinin büyük / küçük harfe duyarlılığı belge diline bağlıdır.

Yani, bir ile bir HTML öğesi verilen Selfcateringsınıfın ancak olmadan SelfCatering, sınıf seçicileri .Selfcateringve [class~="Selfcatering"]bunu maç olacak, seçicileri ederken .SelfCateringve [class~="SelfCatering"]olmaz. ²

Belge türü sınıf adlarını büyük / küçük harfe duyarsız olarak tanımladıysa, ne olursa olsun bir eşleşmeniz olur.

¹ _{Tüm tarayıcılar için tuhaflıklar modunda, sınıflar ve kimlikler büyük / küçük harfe duyarlı değildir. Bu, büyük / küçük harfe uymayan seçicilerin her zaman eşleşeceği anlamına gelir. Bu davranış, eski nedenlerle tüm tarayıcılarda tutarlıdır ve bu makalede belirtilmiştir .}

² _{Değeri ne olursa olsun, Seçiciler düzey 4 , [class~="Selfcatering" i]veya öğelerini kullanarak öznitelik değerleri üzerinde büyük / küçük harfe duyarlı olmayan bir aramayı zorlamak için önerilen bir sözdizimi içerir [class~="SelfCatering" i]. Her iki seçici de bir HTML veya XHTML öğesini bir Selfcateringsınıfla veya bir SelfCateringsınıfla (veya elbette her ikisiyle) eşleştirir . Bununla birlikte, sınıf veya kimlik seçicileri için (henüz?) Böyle bir sözdizimi yoktur (muhtemelen?), Normal özellik seçicilerinden ( kendileriyle ilişkili herhangi bir anlam içermeyen) farklı semantikleri taşıdıkları veya kullanılabilir bir sözdizimi bulmak zor olduğu için.}

— BoltClock
kaynak

7

Whoa bu benim jsfiddle testimin gösterdiklerinin tam tersi . Burada divve DIVseçicilerinin ikisi de eşleşti <div>, ancak id ve sınıf adı seçicilerinin tam olarak büyük / küçük harfe duyarlı olması gerekiyordu. Cevabını yanlış anlamadım mı?

— Dondurulmuş Bezelye Roddy

21

@ Dondurulmuş Bezelyeler Kitabı: Bunun nedeni HTML sınıflarının ve kimliklerinin büyük / küçük harfe duyarlı olması, etiket adlarının küçük olmamasıdır. Bu nedenle özellikle etiket adlarını cevabımın dışında bıraktım. (Bu arada, etiket adları gerçek XHTML'de dokümana bakılmaksızın büyük / küçük harfe duyarlıdır - jsFiddle sayfanın application / xhtml + xml olarak sunulmaya zorlanmasına izin verebilirse, DIVseçici artık eşleşmez.)

— BoltClock

2

@BoltClock "Belge dili" burada ne anlama geliyor?

— Geek

4

@Geek: "belge dili", CSS'yi uyguladığınız dilin (en yaygın olarak HTML, XHTML veya XML) anlamına gelir. Tanımı burada bulabilirsiniz .

— BoltClock

2

Başkası karıştı mı? Seçiciler Hal böyle ise de duyarlı, daha sonra tanımı gereği, (marka CSS sınıfları gelmiyor mu seçerek seçicileri ile ilgili olarak söz) içinde çok hassas? Diğer bir deyişle, birbirleriyle ilişkili olarak (CSS sınıfları ve seçiciler) - eğer biri büyük / küçük harfe duyarsızsa, bu her ikisinin de olduğu anlamına gelir. Yine başka bir deyişle - benim seçici ise .selfcateringve sınıf umrumda neden seçiciler, vaka duyarsız Selfcateringya SelfCateringya sElfcAtErInG? Neyi kaçırıyorum?

— jbyrd

62

Belki bir yalan değil, açıklığa ihtiyaç vardır.

Gerçek css'in kendisi büyük / küçük harfe duyarlı değildir.

Örneğin

wiDth:100%;

ancak isimler, benzersiz tanımlayıcılar olarak büyük / küçük harfe duyarlı olmalıdır.

Umarım yardımcı olur.

— Jack Stone
kaynak

20

Tuhaflıklar modunda , CSS sınıfı ve kimlik adları kullanılırken tüm tarayıcılar büyük / küçük harfe duyarlı değildir .

Quirks modunda CSS sınıfı ve kimlik adları büyük / küçük harfe duyarlı değildir. Standartlar modunda büyük / küçük harfe duyarlıdır. (Bu ayrıca getElementsByClassName için de geçerlidir.) Daha okuyun.

Bazen feryat gibi yanlış doktrinler olduğunda, tarayıcınız tuhaf moda geçer.

<!DOCTYPE html PUBLIC>
<!DOCTYPE html anytext>

standart doktipi kullanmalısın

HTML 5

<!DOCTYPE html>

HTML 4.01 Katı

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Geçiş

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Çerçeve Kümesi

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Katı

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Geçici

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Çerçeve Kümesi

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

CSS sınıfınız veya kimlik adlarınız büyük / küçük harfe duyarlı değilse lütfen dokümanınızı kontrol edin.

— Mohamad Shiralizadeh
kaynak

3

CSS büyük / küçük harfe duyarlı değildir.

Ancak HTML5'te sınıf ve kimlik büyük / küçük harfe duyarlıdır

Yani, CSS özellikleri, değerleri, sözde sınıf adları, sözde öğe adları, öğe adları büyük / küçük harfe duyarlı değildir

CSS sınıfı, id, url'ler, font aileleri büyük / küçük harfe duyarlıdır.

not: html quirks modunda css, kimlik ve sınıf için bile büyük / küçük harfe duyarsızdır (doctype bildirimini kaldırırsanız)

CodePen ile ilgili örnek: https://codepen.io/swapnilPakolu/pen/MWgvQyB?&editable=true#anon-signup

<!DOCTYPE html>
<html>
<head>
<title>CSS case sensitive ?</title>
<style>

P#id
{color:RED;}

p#ID
{font-size:30PX;}

#iD
{BORDER:4px solid blue;}

.class
{text-decoration:underLine;}

.CLASS
{background-color:graY;}

.Class
{font-weight:900;}

#ID::afTeR
{conTent:"colored text";
disPlay:bLock;
color:#fAdAcA;}

.class:hoVeR
{background-color:lightblue;}

</style>
</head>
<body>
<p id="id" class="class">red and underline</p>
<p id="ID" class="CLASS">30px font size and gray background</p>
<p id="iD" class="Class">bold and blue border</p>
</body>
</html>

— takas
kaynak