css - सीएसएस वर्ग के नाम / चयनकर्ताओं में कौन से पात्र मान्य हैं?





css-selectors (8)


मेरी समझ यह है कि अंडरस्कोर तकनीकी रूप से मान्य है। चेक आउट:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"... 2001 के आरंभ में प्रकाशित विनिर्देश के लिए इरेटा पहली बार कानूनी अंडरस्कोर बना दिया।"

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

सीएसएस वर्ग चयनकर्ताओं के भीतर कौन से पात्र / प्रतीकों की अनुमति है? मुझे पता है कि निम्नलिखित वर्ण अमान्य हैं , लेकिन कौन से वर्ण वैध हैं ?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #



आप सीएसएस व्याकरण पर सीधे जांच सकते हैं।

असल में 1 , एक नाम अंडरस्कोर ( _ ), एक हाइफ़न ( - ), या एक अक्षर ( a - z ) के साथ शुरू होना चाहिए, इसके बाद किसी भी संख्या में हाइफ़न, अंडरस्कोर, अक्षरों या संख्याएं होनी चाहिए। एक पकड़ है: यदि पहला चरित्र एक हाइफ़न है, तो दूसरा अक्षर 2 अक्षर या अंडरस्कोर होना चाहिए, और नाम कम से कम 2 वर्ण लंबा होना चाहिए।

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

एक हाइफ़न या अंडरस्कोर से शुरू होने वाले पहचानकर्ता आमतौर पर ब्राउज़र-विशिष्ट एक्सटेंशन के लिए आरक्षित होते हैं, जैसे -moz-opacity

1 यह सब बच निकले यूनिकोड वर्णों को शामिल करने से थोड़ा अधिक जटिल बना दिया गया है (जो वास्तव में कोई भी उपयोग नहीं करता है)।

2 ध्यान दें कि, मैंने जो व्याकरण जोड़ा है, उसके अनुसार, दो हाइफ़न से शुरू होने वाला नियम, उदाहरण के लिए --indent1 , अमान्य है। हालांकि, मुझे पूरा यकीन है कि मैंने इसे अभ्यास में देखा है।




CSS-characters पढ़ें। (यह सीएसएस 2.1 है, ब्राउज़रों की अपनी धारणा के लिए उचित संस्करण ढूंढें)

संपादित करें: प्रासंगिक अनुच्छेद निम्नानुसार है:

सीएसएस में, पहचानकर्ताओं (तत्वों, वर्गों और चयनकर्ताओं में आईडी सहित) में केवल वर्ण [ए-जेड -9] और आईएसओ 10646 वर्ण यू +00 ए 1 और उच्चतर, साथ ही हाइफ़न (-) और अंडरस्कोर (_) हो सकते हैं ; वे अंकों के साथ एक अंक, या एक हाइफ़न के साथ शुरू नहीं कर सकते हैं। पहचानकर्ताओं में भागने वाले वर्ण और किसी भी आईएसओ 10646 वर्ण को संख्यात्मक कोड के रूप में भी शामिल किया जा सकता है (अगला आइटम देखें)। उदाहरण के लिए, पहचानकर्ता "बी एंड डब्ल्यू?" "बी \ और डब्ल्यू \" के रूप में लिखा जा सकता है या "बी \ 26 डब्ल्यू \ 3 एफ"।

2 संपादित करें: जैसा कि @ मिपाडी त्रिपिच के जवाब में बताते हैं, वही वेबपृष्ठ में भी यह caveat :

सीएसएस में, पहचानकर्ता '-' (डैश) या '_' (अंडरस्कोर) से शुरू हो सकते हैं। '-' या '_' से शुरू होने वाले कीवर्ड और प्रॉपर्टी नाम विक्रेता-विशिष्ट एक्सटेंशन के लिए आरक्षित हैं। इस तरह के विक्रेता-विशिष्ट एक्सटेंशन में निम्नलिखित प्रारूपों में से एक होना चाहिए:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

उदाहरण):

उदाहरण के लिए, यदि एक्सवाईजेड संगठन ने डिस्प्ले के पूर्वी किनारे पर सीमा के रंग का वर्णन करने के लिए एक संपत्ति जोड़ा है, तो वे इसे -xyz-border-east-color कह सकते हैं।

अन्य ज्ञात उदाहरण:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

किसी प्रारंभिक डैश या अंडरस्कोर को किसी भी वर्तमान या भविष्य के सीएसएस के किसी भी प्रॉपर्टी या कीवर्ड में कभी भी उपयोग नहीं किया जाता है। इस प्रकार सामान्य सीएसएस कार्यान्वयन ऐसी गुणों को पहचान नहीं सकता है और पार्सिंग त्रुटियों को संभालने के नियमों के अनुसार उन्हें अनदेखा कर सकता है। हालांकि, चूंकि प्रारंभिक डैश या अंडरस्कोर व्याकरण का हिस्सा है, इसलिए सीएसएस 2.1 कार्यान्वयनकर्ता हमेशा एक सीएसएस-अनुरूप पार्सर का उपयोग करने में सक्षम होना चाहिए, भले ही वे किसी भी विक्रेता-विशिष्ट एक्सटेंशन का समर्थन करते हों या नहीं।

लेखकों को विक्रेता-विशिष्ट एक्सटेंशन से बचना चाहिए




उन लोगों के लिए जो कामकाज की तलाश में हैं, आप एक विशेषता चयनकर्ता का उपयोग कर सकते हैं, उदाहरण के लिए, यदि आपकी कक्षा किसी संख्या से शुरू होती है। परिवर्तन:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

इसके लिए:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

इसके अलावा, यदि कई कक्षाएं हैं, तो आपको उन्हें चुनने वाले चयनकर्ता में निर्दिष्ट करने की आवश्यकता होगी।

सूत्रों का कहना है:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. सीएसएस कक्षाओं को नामों के साथ बनाने के लिए कोई कामकाज है जो संख्याओं के साथ शुरू होता है?



पूर्ण नियमित अभिव्यक्ति है:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

इसलिए यदि आपके द्वारा सीधे उपयोग किए जाने पर " - " और " _ " को छोड़कर आपके सभी सूचीबद्ध वर्णों की अनुमति नहीं है। लेकिन आप बैकस्लैश foo\~bar का उपयोग करके या यूनिकोड नोटेशन foo\7E bar का उपयोग करके उन्हें एन्कोड कर सकते हैं।




एचटीएमएल 5 / CSS3 कक्षाओं और आईडी के लिए संख्याओं के साथ शुरू कर सकते हैं।




मैंने यहां आपके प्रश्न का गहराई से उत्तर दिया है: explanation

लेख में यह भी बताया गया है कि सीएसएस (और जावास्क्रिप्ट) में किसी भी चरित्र से कैसे बचें, और मैंने इसके लिए एक आसान टूल भी बनाया। उस पृष्ठ से:

यदि आप तत्व को [email protected]$%^&*()_+-=,./';:"?><[]{}|`# का आईडी मान देना [email protected]$%^&*()_+-=,./';:"?><[]{}|`# , तो चयनकर्ता इस तरह दिखेगा:

सीएसएस:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

जावास्क्रिप्ट:

<script>
  // document.getElementById or similar
  document.getElementById('[email protected]$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>



जैसा कि यह पहले से ही कई बार कहा गया है - div ~ p सभी <p> तत्व जो <div> तत्व से पहले हैं, चुने गए हैं।

सभी सीएसएस चयनकर्ताओं की इस सूची को देखें।





css css-selectors