ब्राउज़र में CSS विशिष्टता कैसे काम करती है

बहुत से लोग CSS जटिल पाते हैं। वे विभिन्न बहाने बनाते हैं: सीएसएस या सीएसएस को समझने की क्षमता का अभाव अपने आप में बुरा है। लेकिन वास्तविकता यह है कि लोगों को वास्तव में इसका अध्ययन करने का समय नहीं मिला। यदि आप इस लेख को पढ़ रहे हैं, तो आप सीएसएस सीखने में रुचि रखते हैं और यह बहुत अच्छा है!

CSS विशिष्टता क्या है?

क्या आपने कभी एक शैली लिखी है, लेकिन यह काम नहीं करता है, तो आप जोड़ते हैं ! महत्वपूर्ण (या नहीं), और फिर भी यह काम नहीं करता है? तब आप देवतूलों को देखते हैं और महसूस करते हैं कि एक और शैली कहीं न कहीं आप पर हावी है?

यह सीएसएस की विशिष्टता है! यह है कि ब्राउज़र तत्व को लागू करने के लिए कौन से प्रतिस्पर्धी चयनकर्ताओं का चयन करता है। जब ब्राउज़र देखता है कि दो या दो से अधिक चयनकर्ता एक ही तत्व से मेल खाते हैं, और चयनकर्ताओं के पास परस्पर विरोधी नियम हैं, तो यह पता लगाने के लिए एक तरीका है कि इस तत्व पर कौन से नियम लागू होते हैं। जिस तरह से ऐसा होता है उसे "CSS विशिष्टता मूल्य" कहा जाता है।

इससे पहले कि हम CSS विशिष्टता में तल्लीन हों, इन बातों को याद रखें:

1. सीएसएस विशिष्टता केवल महत्वपूर्ण है जब कई चयनकर्ता एक ही तत्व को प्रभावित करते हैं। ब्राउज़र को यह पता लगाने के लिए एक तरीका चाहिए कि किस शैली को संबंधित तत्व पर लागू किया जाए जब परस्पर विरोधी गुण मौजूद हों।
2. जब दो या अधिक मिलान वाले चयनकर्ताओं का एक ही विशिष्टता मूल्य (वजन) होता है, तो ब्राउज़र "सबसे हालिया" मिलान चयनकर्ता का चयन करता है जो मिलान चयनकर्ताओं की सूची के नीचे दिखाई देता है। निम्नलिखित अनुच्छेद बताता है कि "उपयुक्त चयनकर्ताओं की सूची" क्या है।
3. ब्राउज़र वेब पेज पर सभी शैलियों को जोड़कर और "वर्तमान में होने वाले स्टाइल" तत्व से मेल नहीं खाने वाले लोगों को फ़िल्टर करके "उपयुक्त चयनकर्ताओं की सूची" बनाता है। स्टाइलशीट में पहले चयनकर्ता सूची में सबसे ऊपर हैं, और अंतिम चयनकर्ता सबसे नीचे हैं।
4. एक तत्व की शैली की संपत्ति का स्टाइल शीट में चयनकर्ताओं की तुलना में अधिक विशिष्ट मूल्य है, जब तक कि शैली शीट चयनकर्ता में महत्वपूर्ण नहीं है।
5. का उपयोग करना ! महत्वपूर्ण (जो कुछ मामलों में बुरा अभ्यास माना जाता है) चयनकर्ता की विशिष्टता को बदलता है। जब दो चयनकर्ताओं की समान विशिष्टता होती है, तो चयनकर्ता महत्वपूर्ण जीत हासिल करता है। और जब वे दोनों होते हैं ! महत्वपूर्ण , "सबसे हाल का" चयनकर्ता जीतता है।

विशिष्टता मूल्य

अब हम आगे बढ़ सकते हैं कि कैसे ब्राउज़र चयनकर्ता की विशिष्टता निर्धारित करता है।

चयनकर्ता की विशिष्टता को हाइफ़न (या जो भी) द्वारा अलग किए गए तीन अंकों के स्ट्रिंग के रूप में दर्शाया जा सकता है: "2-4-1"। पहला अंक मौजूद आईडी चयनकर्ताओं की संख्या है, दूसरा वर्ग चयनकर्ताओं, विशेषता और छद्म श्रेणी चयनकर्ताओं की संख्या है, और तीसरा प्रकार और छद्म तत्व चयनकर्ताओं की संख्या उपलब्ध है। उदाहरण के लिए:

#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0 

सबसे "विशिष्ट" की परिभाषा

यह निर्धारित करने के लिए कि कौन सा चयनकर्ता अधिक विशिष्ट है, आप तीन मूल्यों में से प्रत्येक की तुलना कर सकते हैं।

मान लें कि आपके पास अंतिम दो उदाहरणों के रूप में 1-1-1 और 0-3-0 हैं, और आपको यह निर्धारित करने की आवश्यकता है कि किसमें सबसे अधिक विशिष्टता है। पहले आप अंतिम मान 1 और 0 की तुलना करते हैं, और इस मामले में 1 जीतता है। इसका मतलब यह है कि इस समय div.yellow#red का अधिक विशिष्ट मूल्य है ... लेकिन हमने मूल्यों की तुलना करना समाप्त नहीं किया है।

अगला, 1 और 3 , 3 जीत के मूल्यों की तुलना करें। वर्तमान में .red.blue.yellow का अधिक विशिष्ट मूल्य है।

अंत में, हम पहले मूल्यों, 1 और 0 और 1 जीत की तुलना करते हैं, इसलिए div.yellow#red में .red.blue.yellow तुलना में अधिक विशिष्टता है।

चयनकर्ता की सीएसएस विशिष्टता इस बात का एक अच्छा विवरण प्रदान करती है कि कोई भी वर्ग चयनकर्ता आईडी चयनकर्ता को ओवरराइड क्यों नहीं कर सकता है।

छोटी चेतावनियाँ

3 "नुकसान" के बारे में पता होना:

1. मैंने ऊपर लिखा है कि तीन की संख्या वाले अनुक्रम में दूसरा नंबर "वर्ग चयनकर्ताओं, विशेषता चयनकर्ताओं और छद्म वर्गों की संख्या" है। यह सभी मामलों में सच है, सिवाय इसके कि :not() नॉट :not() छद्म वर्ग। जब यह है :not() छद्म वर्ग, हम इस पर विचार नहीं करते हैं, लेकिन बस इसे अनदेखा करते हैं। लेकिन इसके अंदर चयनकर्ताओं को नजरअंदाज नहीं किया जाता है, उन्हें सामान्य माना जाता है।
2. CSS विशिष्टता एक चयनकर्ता के "आकार" को समझती है। इसका मतलब यह है कि जब आपके पास *[id="yellow"] और #yellow , तो पहले को एक विशेषता चयनकर्ता के रूप में माना जाता है।
3. सार्वभौमिक चयनकर्ता * अकेले चयनकर्ता की विशिष्टता की ओर नहीं जाता है। ऊपर पैराग्राफ [id="yellow"] में, चयनकर्ता का हिस्सा वास्तव में क्या मायने रखता है।

मुझे उम्मीद है कि यह लेख समझने में आसान है और यह समझने में मदद करता है कि सीएसएस विशिष्टता क्या है। अब आप शैली को देख सकते हैं और आसानी से यह निर्धारित कर सकते हैं कि यह "विशिष्ट" कैसे है।