CSS चयनकर्ताओं के मामले में वर्ग के नाम संवेदनशील हैं?

Question

मैं हर जगह पढ़ता रहता हूं कि CSS संवेदनशील नहीं है, लेकिन मेरे पास यह चयनकर्ता है

.holiday-type.Selfcatering

जब मैं अपने HTML में उपयोग करता हूं, तो इस तरह से उठाया जाता है

<div class="holiday-type Selfcatering">

अगर मैं उपरोक्त चयनकर्ता को इस तरह से बदल दूं

.holiday-type.SelfCatering

फिर शैली उठा नहीं जाता है।

कोई झूठ बोल रहा है।

Comments

इस कहानी का नैतिक हर समय संवेदनशील होना चाहिए - आगे और पीछे बिली नहीं। आप पाएंगे कि आपका कोड पढ़ने में आसान है और कोई भी आपके बचे हुए सामान को उठाएगा, उसकी सराहना करेगा।

— kingdango

Im अभी से संवेदनशील के रूप में इलाज कर रहा है। वर्ग = "मूल्य" काम नहीं कर रहा, वर्ग = "मूल्य" काम कर रहा है, इसलिए प्रत्येक दिन व्यावहारिक रूप से वे संवेदनशील हैं।

— टीनो म्लेकरन

देखें एक पूरा "केस मैट्रिक्स" , में केस संवेदनशीलता के बारे में गुण के मूल्यों और चयनकर्ताओं ।

— पीटर क्रस

मज़ेदार बात है, मैं लगातार अपने वर्ग के नाम में कैमकेलेज़ का उपयोग कर रहा था, लेकिन सीएसएस ने इसे आईओएस वेबव्यू पर नहीं चुना। तो नैतिक है, हमेशा-उपयोग-डैश-के लिए कक्षाएं।

— एपिकपांडाफर्स

Answer 1

CSS चयनकर्ता आमतौर पर केस-असंवेदनशील होते हैं; इसमें वर्ग और आईडी चयनकर्ता शामिल हैं।

लेकिन एचटीएमएल वर्ग के नाम हैं केस संवेदी (विशेषता परिभाषा देखें), और के अपने दूसरे उदाहरण में एक बेमेल के कारण है कि। यह HTML5 में नहीं बदला है । ¹

ऐसा इसलिए है क्योंकि चयनकर्ताओं की केस-सेंसिटिविटी इस बात पर निर्भर करती है कि दस्तावेज़ की भाषा क्या कहती है :

सभी चयनकर्ता वाक्य रचना ASCII रेंज (यानी [az] और [AZ] के समतुल्य हैं) के मामले में असंवेदनशील हैं, सिवाय उन हिस्सों को छोड़कर जो चयनकर्ताओं के नियंत्रण में नहीं हैं। दस्तावेज़ भाषा तत्व नाम, विशेषता नाम और चयनकर्ताओं में विशेषता मान की केस संवेदनशीलता दस्तावेज़ भाषा पर निर्भर करती है।

इसलिए, एक HTML तत्व एक Selfcateringवर्ग के साथ दिया गया है लेकिन एक वर्ग के बिना SelfCatering, चयनकर्ता .Selfcateringऔर [class~="Selfcatering"]इसका मिलान करेंगे, जबकि चयनकर्ता .SelfCateringऔर [class~="SelfCatering"]नहीं। ²

यदि दस्तावेज़ प्रकार वर्ग के नाम को केस-असंवेदनशील के रूप में परिभाषित करता है, तो आपके पास मैच की परवाह किए बिना होगा।

---

¹ _{सभी ब्राउज़रों के लिए quirks मोड में, कक्षाएं और ID केस-असंवेदनशील हैं। इसका अर्थ है केस-मिसमैचिंग चयनकर्ता हमेशा मेल करेंगे। यह व्यवहार विरासत कारणों से सभी ब्राउज़रों के अनुरूप है, और इस लेख में इसका उल्लेख किया गया है ।}

² _{क्या यह की कीमत के लिए, चयनकर्ता स्तर 4 का उपयोग कर विशेषता मान पर एक केस-संवेदी खोज के लिए मजबूर करने के लिए एक प्रस्तावित वाक्य रचना शामिल [class~="Selfcatering" i]या [class~="SelfCatering" i]। दोनों चयनकर्ता एक Selfcateringवर्ग या एक SelfCateringवर्ग (या, ज़ाहिर है, दोनों) के साथ एक HTML या XHTML तत्व से मेल खाएँगे । हालाँकि, क्लास या आईडी चयनकर्ताओं (अभी तक?) के लिए ऐसा कोई सिंटैक्स नहीं है, संभवत: इसलिए कि वे नियमित विशेषता चयनकर्ताओं (जिनके साथ कोई शब्दार्थ से जुड़ा हुआ नहीं है) से अलग शब्दार्थक ले जाते हैं , या क्योंकि यह एक यूनिक सिंटैक्स के साथ आना मुश्किल है।}

Comments

वाह यह मेरे jsfiddle परीक्षण इंगित करता है के बिल्कुल विपरीत है। वहाँ divऔर DIVचयनकर्ताओं ने दोनों का मिलान किया <div>, लेकिन आईडी और श्रेणी के नाम चयनकर्ताओं को बिल्कुल संवेदनशील होना पड़ा। जब तक मैं आपके जवाब को गलत नहीं समझा?

— फ्रोजन मटर

@ फ्रोजन मटर की डंडी: ऐसा इसलिए है क्योंकि HTML कक्षाएं और आईडी केस संवेदी हैं, जबकि टैग नाम नहीं हैं। मैंने विशेष रूप से इस कारण से अपने उत्तर से टैग नाम छोड़ दिए हैं। (वैसे, टैग नाम केवल वास्तविक XHTML में संवेदनशील हैं, भले ही सिद्धांत की परवाह किए बिना - यदि jsFiddle आपको पृष्ठ को एप्लिकेशन / xhtml + xml के रूप में प्रस्तुत करने के लिए बाध्य कर सकता है, तो DIVचयनकर्ता अब मेल नहीं खाएगा।)

— BoltClock

@BoltClock "दस्तावेज़ भाषा" का क्या अर्थ है?

— Geek

@ गीक: "डॉक्यूमेंट लैंग्वेज" से तात्पर्य उस भाषा से है जो आप सीएसएस को लागू कर रहे हैं, सबसे अधिक HTML, XHTML या XML। आप यहां परिभाषा पा सकते हैं ।

— BoltClock

क्या कोई और अच्छी तरह से भ्रमित है? चयनकर्ताओं मामले हैं में संवेदनशील है, तो परिभाषा के द्वारा, न कि मेकअप सीएसएस वर्गों (करता है उन्हें चुनने चयनकर्ताओं के संबंध में मामले) में संवेदनशील है, भी? दूसरे शब्दों में, एक दूसरे के संबंध में (सीएसएस कक्षाएं और चयनकर्ता) - यदि कोई मामला असंवेदनशील है, तो इसका मतलब है कि वे दोनों हैं। अभी तक दूसरे शब्दों में - अगर मेरे चयनकर्ता है .selfcateringऔर चयनकर्ताओं केस इनसेन्सीटिव होते हैं कारण है कि यह ध्यान देना चाहिए कि क्या वर्ग है Selfcateringया SelfCateringया sElfcAtErInG? मैं क्या खो रहा हूँ?

— jbyrd

Answer 2

शायद झूठ नहीं, लेकिन स्पष्टीकरण की जरूरत है।

वास्तविक सीएसएस स्वयं संवेदनशील नहीं है।

उदाहरण के लिए

wiDth:100%;

लेकिन नाम, उन्हें अद्वितीय पहचानकर्ता होने के लिए संवेदनशील होना चाहिए।

उम्मीद है की वो मदद करदे।

Answer 3

Quirks मोड में सभी ब्राउज़र CSS क्लास और आईडी नामों का उपयोग करते समय केस-असंवेदनशील की तरह व्यवहार करते हैं ।

Quirks मोड में CSS क्लास और id नाम केस असंवेदनशील हैं। मानकों मोड में वे मामले संवेदनशील होते हैं। (यह getElementsByClassName पर भी लागू होता है।) और पढ़ें

कभी-कभी जब आपके पास गलत सिद्धांत होते हैं जैसे कि आपका ब्राउज़र, तो आपका ब्राउज़र quirks मोड में चला जाता है।

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

आपको मानक सिद्धांत का उपयोग करना चाहिए

HTML 5

<!DOCTYPE html> 

HTML 4.01 सख्त

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

HTML 4.01 संक्रमणकालीन

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

HTML 4.01 फ्रेमसेट

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

XHTML 1.0 सख्त

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

XHTML 1.0 संक्रमणकालीन

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

XHTML 1.0 फ्रेमसेट

<!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 class या id नाम असंवेदनशील है तो कृपया अपने सिद्धांत की जाँच करें।

Answer 4

CSS केस असंवेदनशील है।

लेकिन HTML5 में क्लास और ID केस सेंसिटिव हैं

तो, CSS गुण, मान, छद्म वर्ग नाम, छद्म तत्व नाम, तत्व नाम असंवेदनशील हैं

और सीएसएस वर्ग, आईडी, यूआरएल, फ़ॉन्ट-परिवार मामले संवेदनशील हैं।

नोट: html quirks मोड में css आईडी और क्लास के लिए असंवेदनशील है (यदि आप doctype घोषणा को हटाते हैं)

CodePen पर उदाहरण: 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>