CSS विशिष्टता में बिंदुओं की गणना कैसे की जाती है

Question

अनुसंधान विशिष्टता मैं इस ब्लॉग पर ठोकर खाई - http://www.htmldog.com/guides/cssadvanced/specificative/

यह बताता है कि सीएसएस के लिए विशिष्टता एक बिंदु-स्कोरिंग प्रणाली है। यह हमें बताता है कि तत्व 1 अंक के लायक हैं, कक्षाएं 10 अंकों के लायक हैं और आईडी 100 अंकों के लायक हैं। यह भी शीर्ष पर जाता है कि ये बिंदु कुल हैं और समग्र राशि चयनकर्ता की विशिष्टता है।

उदाहरण के लिए:

body = 1 पॉइंट
बॉडी .wrapper = 11 पॉइंट
बॉडी .wrapper #container = 111 पॉइंट

इसलिए, इन बिंदुओं का उपयोग करते हुए, मैं उम्मीद करता हूं कि निम्नलिखित सीएसएस और HTML पाठ के नीले होने के परिणामस्वरूप होंगे:

#a {
    color: red;
}

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
  color: blue;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          <div class="f">
            <div class="g">
              <div class="h">
                <div class="i">
                  <div class="j">
                    <div class="k">
                      <div class="l">
                        <div class="m">
                          <div class="n">
                            <div class="o" id="a">
                              This should be blue.
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

जब एक कक्षा १०० अंक के बराबर होती है, तो १५ कक्षाएं १५० अंक के बराबर क्यों होंगी?

जाहिर है कि अंक सिर्फ कुल नहीं हैं; वे सम्‍मिलित हैं। इसके बारे में यहाँ और पढ़ें - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

इसका मतलब यह है कि हमारे चयनकर्ता में कक्षाएं = 0,0,15,0या 0,1,5,0?

(मेरे सहज ज्ञान मुझे बताओ यह पूर्व है, के रूप में हम इस तरह आईडी चयनकर्ता के विशिष्टता लग रहा है: 0,1,0,0)

Comments

यहाँ कुछ विचित्र भी है: stackoverflow.com/questions/25565928/…

— आर्मेल लारिएर

Answer 1

पेका का जवाब है व्यावहारिक रूप से सबसे अच्छा तरीका है इस मुद्दे के बारे में सोचना सही है, और शायद।

हालाँकि, जैसा कि कई पहले ही बता चुके हैं, W3C CSS अनुशंसा में कहा गया है कि "तीन संख्या एबीसी (एक बड़े आधार के साथ एक संख्या प्रणाली में) की समालोचना विशिष्टता प्रदान करती है।" तो मेरे अंदर के geek को अभी यह पता लगाना था कि यह आधार कितना बड़ा है।

यह पता चला है कि इस मानक एल्गोरिथ्म को लागू करने के लिए "बहुत बड़ा आधार" कार्यरत है (कम से कम 4 सबसे अधिक इस्तेमाल किए गए ब्राउज़र ^* ) 256 या 2 ⁸ ।

इसका मतलब यह है कि 0 आईडी और 256 वर्ग-नाम के साथ निर्दिष्ट शैली केवल 1 आईडी के साथ निर्दिष्ट शैली को ओवर-राइड करेगी । मैंने कुछ पहेलियों के साथ इसका परीक्षण किया:

• 255 कक्षाएं 1 आईडी को ओवरराइड करने के लिए पर्याप्त नहीं हैं
• ... लेकिन 1 आईडी को ओवरराइड करने के लिए 256 कक्षाएं पर्याप्त हैं

• ... और 256 टैग-नाम 1 वर्ग-नाम को ओवरराइड करने के लिए पर्याप्त हैं

• ... लेकिन, अफसोस 256 आईडी 1 इनलाइन शैली को ओवरराइड करने के लिए पर्याप्त नहीं हैं (2012/8/15 अपडेट किया गया - आपको उपयोग करना होगा !important)

इसलिए, प्रभावी रूप से, "पॉइंट सिस्टम" है, लेकिन यह आधार नहीं है। यह आधार 256 है। यहां बताया गया है कि यह कैसे काम करता है:

(2 ⁸ ) ² या 65536, बार चयनकर्ता में आईडी की संख्या
+ (2 ⁸ ) ¹ या 256, बार चयनकर्ता में वर्ग के नाम की संख्या
+ (2 ⁸ ) ⁰ या 1, बार tag- की संख्या चयनकर्ता में नाम

यह अवधारणा को संप्रेषित करने के लिए बैक-ऑफ-द-लिफाफा अभ्यासों के लिए बहुत व्यावहारिक नहीं है।
शायद इसीलिए विषय पर लेख बेस 10 का उपयोग कर रहे हैं।

***** [ओपेरा 2 ¹⁶ का उपयोग करता है (karlcow की टिप्पणी देखें)। कुछ अन्य चयनकर्ता इंजन अनंत का उपयोग करते हैं - प्रभावी रूप से कोई अंक प्रणाली नहीं (देखें साइमन सैपिन की टिप्पणी)।

अद्यतन, जुलाई 2014:
जैसा कि ब्लेज़मॉन्गर ने वर्ष में पहले बताया था, वेबकिट ब्राउज़र (क्रोम, सफारी) अब 256 से अधिक आधार का उपयोग करते दिखाई देते हैं। शायद ओपेरा की तरह 2 ¹⁶ ? IE और फ़ायरफ़ॉक्स अभी भी 256 का उपयोग करते हैं।

Comments

महत्वपूर्ण: ध्यान दें कि 256 नंबर युक्ति में नहीं है । इस प्रकार, यह उत्तर एक (सम्मिलित रूप से उपयोगी) कार्यान्वयन विवरण का वर्णन करता है।

— मैट फेनविक

न केवल 256 युक्ति में नहीं है जैसा @MattFenwick ने कहा था, लेकिन यह पूरे कार्यान्वयन में भी भिन्न है। यह ओपेरा में स्पष्ट रूप से बड़ा है। WeasyPrint और cssselect में यह "इनफिनिटी" है: मैं एक पूर्णांक के बजाय पूर्णांकों के ट्यूपल का उपयोग करता हूं ।

— साइमन सैपिन

@ फ़ॉस्ट ऑपेरा 8 के बजाय 16 बिट्स का उपयोग करता है

— karlcow

इस जवाब में पक्के के जवाब से ज्यादा व्यावहारिक वर्णन है, ईमानदार होना। मूल रूप से @Matt Fenwick क्या कहता है: आप जो वर्णन कर रहे हैं वह कल्पना का व्यावहारिक कार्यान्वयन है। उस पर एक त्रुटिपूर्ण, लेकिन किसी के बारे में ऐसा नहीं किया जाना चाहिए कि यह लेखकों या कार्यान्वयनकर्ताओं द्वारा किया जाए।

— BoltClock

256 वेबकिट (क्रोम और सफारी) के वर्तमान संस्करणों में अपर्याप्त प्रतीत होता है, आगे @ मैटफेनविक बिंदु को रेखांकित करता है।

— ब्लेज़मॉन्गर

Answer 2

अच्छा प्रश्न।

मैं निश्चित रूप से नहीं बता सकता - सभी लेख जो मैं कई वर्गों के उदाहरण से बचने के लिए ढूंढता हूं , जैसे कि यहां - लेकिन मैं मानता हूं कि जब एक वर्ग चयनकर्ता और एक आईडी के बीच विशिष्टता की तुलना करने की बात आती है , तो कक्षा की गणना एक के साथ की जाती है 15केवल मूल्य , चाहे वह कितना ही विस्तृत क्यों न हो।

यह मेरे अनुभव से मेल खाता है कि विशिष्टता कैसे व्यवहार करती है।

हालांकि, कक्षाओं का कुछ स्टैकिंग होना चाहिए क्योंकि

.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o

से अधिक विशिष्ट है

.o

मेरे पास एकमात्र स्पष्टीकरण यह है कि स्टैक किए गए वर्गों की विशिष्टता केवल एक दूसरे के खिलाफ नहीं बल्कि आईडी के खिलाफ गणना की जाती है।

अद्यतन : मैं इसे अभी प्राप्त करता हूं। यह एक अंक प्रणाली नहीं है, और 15 अंकों के वजन वाले वर्गों के बारे में जानकारी गलत है। यह एक 4-भाग नंबरिंग प्रणाली है जिसे यहाँ बहुत अच्छी तरह से समझाया गया है ।

प्रारंभिक बिंदु 4 आंकड़े हैं:

style  id   class element
0,     0,   0,    0

विशिष्टता पर W3C स्पष्टीकरण के अनुसार , उपर्युक्त नियमों के लिए विशिष्ट मूल्य हैं:

#a            0,1,0,0    = 100
classes       0,0,15,0   = ... see the comments

यह एक बहुत बड़ी (अपरिभाषित) आधार वाली एक संख्या प्रणाली है।

मेरी समझ यह है कि क्योंकि आधार बहुत बड़ा है, कॉलम 4 में कोई संख्या कॉलम 3 में नंबर> 0 को नहीं हरा सकती है, कॉलम 2, कॉलम 1 के लिए समान है .... क्या यह सही है?

मुझे दिलचस्पी होगी कि क्या कोई मेरे साथ गणित में बेहतर समझ रखता है, जो वें नंबरिंग सिस्टम की व्याख्या कर सकता है और व्यक्तिगत तत्वों के 9 से बड़े होने पर इसे दशमलव में कैसे परिवर्तित कर सकता है।

Comments

Thats क्योंकि इसके बीच .o और .a .b आदि तो यह उन्हें सामूहिक रूप से विचार करेगा। लेकिन एक आईडी और एक वर्ग के बीच जैसे: .a और #a आईडी हमेशा प्रबल होगी। यह (मुझे लगता है) केवल उन वर्गों के बीच की गणना करता है जब एक अधिक प्रबलिंग एटीआर नहीं होता है। जैसे क्लास ओवर एलिमेंट और आईडी ओवर क्लास।

— स्फिंन

@ ओजाकी वह है जो मैं भी मान रहा हूं, लेकिन यह विरोधाभासी है कि ओपी अंक प्रणाली के बारे में क्या कह रहा है। नाटक में और भी बहुत कुछ होना चाहिए। मैं इसके पीछे के नियम देखना चाहूंगा।

— पाइका

बस एहसास हुआ कि हम दोनों एक ही निष्कर्ष पर आए हैं। उत्कृष्ट कार्य!

— सैम

मैथ्स पक्ष के लिए, हम यहां बेस 16 में काम कर सकते हैं (क्योंकि व्यक्तिगत संख्याओं में से कोई भी 15 से अधिक नहीं है)। तो 0,1,0,0 = 0100 h = 256 0,0,15,0 = 00f0h = 240 256> 240 इसलिए id सेलेक्ट करने वाला जीत जाता है।

— मैथ्यू विल्सन

हां, आप एक बड़े आधार के साथ संख्या प्रणाली में किए जा रहे विशिष्टता गणनाओं के बारे में सोच सकते हैं। मुझे लगता है कि शब्द "कंक्रीटिंग" (कल्पना में भी उपयोग किया जाता है) हालांकि एक बेहतर विवरण है। (एक नया सवाल जो पता चला है कि यह एक चलते-फिरते, आंकड़ा के शिकार होने की जवाब देने से यहाँ आया ...)

— BoltClock

Answer 3

वर्तमान चयनकर्ता स्तर 4 वर्किंग ड्राफ्ट सीएसएस में विशिष्टता का वर्णन करने का एक अच्छा काम करता है:

आदेश में तीन घटकों की तुलना करके विशिष्टताओं की तुलना की जाती है: एक बड़े ए मूल्य के साथ विशिष्टता अधिक विशिष्ट है; यदि दो A मान बंधे हैं, तो बड़े B मान के साथ विशिष्टता अधिक विशिष्ट है; यदि दो B मान भी बंधे हैं, तो बड़े c मान के साथ विशिष्टता अधिक विशिष्ट है; यदि सभी मान बंधे हुए हैं, तो दो विशिष्टताएँ समान हैं।

इसका मतलब है कि ए, बी और सी एक दूसरे से पूरी तरह से स्वतंत्र हैं।

15 कक्षाएं आपके चयनकर्ता को 150 का एक विशिष्ट स्कोर नहीं देती हैं, यह इसे 15 का बी मान देता है । एक एकल ए मान इस पर हावी होने के लिए पर्याप्त है।

एक रूपक के रूप में, 1 भव्य माता-पिता, 1 माता-पिता और 1 बच्चे के परिवार की कल्पना करें। इसे 1,1,1 के रूप में दर्शाया जा सकता है । यदि माता-पिता के 15 बच्चे हैं, तो यह अचानक उन्हें दूसरा माता-पिता ( 1,2,0 ) नहीं बनाता है । इसका अर्थ है कि माता-पिता के पास एक बहुत अधिक जिम्मेदारी है क्योंकि उनके पास सिर्फ 1 बच्चा ( 1,1,15 ) था। ;)

यही प्रलेखन यह भी कहता है:

भंडारण सीमाओं के कारण, कार्यान्वयन में ए , बी या सी के आकार की सीमाएं हो सकती हैं । यदि ऐसा है, तो सीमा से अधिक मूल्य उस सीमा से जुड़ा होना चाहिए, और अतिप्रवाह नहीं।

यह Faust के उत्तर में प्रस्तुत समस्या से निपटने के लिए जोड़ा गया है , जिससे 2012 में वापस CSS कार्यान्वयनों ने विशिष्टता मूल्यों को एक दूसरे में अतिप्रवाह करने की अनुमति दी।

2012 में वापस, अधिकांश ब्राउज़रों ने 255 की सीमा को लागू किया, लेकिन इस सीमा को अतिप्रवाह करने की अनुमति दी गई। 255 वर्गों में 0,255,0 का ए, बी, सी विशिष्टता स्कोर था , लेकिन 256 कक्षाएं अतिप्रवाहित थीं और ए, बी, सी का स्कोर 1,0,0 था । अचानक हमारा B मान हमारा A मान बन गया । चयनकर्ता स्तर 4 प्रलेखन पूरी तरह से उस समस्या को बताता है कि इस सीमा को अतिप्रवाह की अनुमति नहीं दी जा सकती है। इस कार्यान्वयन के साथ, 255 और 256 दोनों वर्गों में समान ए, बी, सी स्कोर 0,255,0 होगा ।

फ़ॉस्ट के उत्तर में दी गई समस्या तब से अधिकांश आधुनिक ब्राउज़रों में ठीक हो गई है।

Answer 4

वर्तमान में मैं CSS CSS: एडवांस्ड वेब स्टैंडर्ड्स सॉल्यूशंस पुस्तक का उपयोग कर रहा हूं ।

अध्याय 1, पृष्ठ 16 कहता है:

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

(जोर मेरा) और

एक चयनकर्ता की विशिष्टता चार घटक स्तरों में टूट गई है: ए, बी, सी और डी।

• यदि शैली एक इनलाइन शैली है, तो एक = 1
• b = आईडी चयनकर्ताओं की कुल संख्या
• सी = वर्ग, छद्म वर्ग, और विशेषता चयनकर्ताओं की संख्या
• d = प्रकार चयनकर्ताओं और छद्म तत्व चयनकर्ताओं की संख्या

यह कहा जाता है कि आप अक्सर गणना बेस -10 में कर सकते हैं, लेकिन केवल अगर सभी कॉलम में 10 से कम मान हों।

---

आपके उदाहरणों में, आईडी 100 अंकों के लायक नहीं हैं; प्रत्येक [0, 1, 0, 0]अंक के लायक है । इसलिए, एक आईडी 15 वर्गों की धड़कन करता है क्योंकि उच्च-आधार संख्या प्रणाली की [0, 1, 0, 0]तुलना [0, 0, 15, 0]में अधिक है ।

Answer 5

मैं ओलंपिक खेलों की पदक तालिका (गोल्ड फ़र्स्ट मेथड - पहले स्वर्ण पदकों की संख्या, फिर रजत और फिर कांस्य) के आधार पर विशिष्ट रैंकिंग की तुलना का शौकीन हूं।

यह आपके प्रश्न के साथ भी काम करता है (एक विशिष्टता समूह में चयनकर्ताओं की बड़ी संख्या)। विशिष्टता प्रत्येक समूह को अलग-अलग मानती है। वास्तविक दुनिया में मैंने एक दर्जन से अधिक चयनकर्ताओं के साथ बहुत कम मामला देखा है)।

यहां काफी अच्छी विशिष्टता कैलकुलेटर भी उपलब्ध है । आप अपना उदाहरण (#a और .a .b .c .d .e .f .g .h .j .j .k .k .l .m .n .o .o) वहाँ रख सकते हैं और परिणाम देख सकते हैं।

रियो 2016 ओलंपिक खेलों की पदक तालिका का उदाहरण

Answer 6

मुझे विश्वास नहीं है कि ब्लॉग की व्याख्या सही है। विनिर्देश यहाँ है:

http://www.w3.org/TR/CSS2/cascade.html#specificity

एक वर्ग चयनकर्ता से "अंक" एक "आईडी" चयनकर्ता से अधिक महत्वपूर्ण नहीं हो सकता है। यह सिर्फ उस तरह काम नहीं करता है।

Comments

जैसा मैंने अपने जवाब में कहा। ^ ^ हालांकि यह एक ही प्रकार (तत्व, वर्ग, आईडी) के अधिक होने से फर्क पड़ता है। लेकिन यह बहुत स्पष्ट है अगर 5 वें कहते हैं लाल और 3 कहते हैं नीला अच्छी तरह से इमा लाल।

— स्फ़वन

विशिष्टता के आस-पास शब्दांकन शायद CSS2 और CSS2.1 के बीच बहुत अधिक नहीं बदला गया है, लेकिन आपको भविष्य की चर्चाओं में CSS2.1 युक्ति की ओर वास्तव में इंगित करना चाहिए क्योंकि यह पूरी तरह से CSS2 को सुपरस्टार करता है जो रिलीज के बिंदु पर सामान्य रूप से टूट गया था।

— रॉबिन व्हिटलटन

Answer 7

मैं कहूँगा कि:

Element < Class < ID

मुझे लगता है कि वे केवल इस बात पर निर्भर करते हैं कि आपको क्या मिलता है अगर यह उसी के कई हैं। तो एक क्लास हमेशा एलिमेंट और आईडी को हमेशा क्लास के ऊपर रखेगा लेकिन अगर यह 4 एलीमेंट्स में से एक है जहां 3 को ब्लू और 1 को रेड करना है तो यह ब्लू हो जाएगा।

उदाहरण के लिए:

.a .b .c .d .e .f .g .h .i .j .k .l
{
color: red;
}

 .m .n .o
{
color blue;
}

लाल निकलना चाहिए।

उदाहरण देखें http://jsfiddle.net/RWFWq/

"अगर 5 वें लाल कहते हैं और 3 नीले कुएं कहते हैं तो इमा लाल हो जाती हैं"