यह उत्तर निरपेक्ष शुरुआती के लिए है। यदि आप इस उत्तर का अवलोकन चाहते हैं तो कृपया मेरा दूसरा उत्तर पढ़ें।
कैस्केडिंग विभिन्न स्टाइलशीट के संयोजन और विभिन्न सीएसएस नियमों और घोषणाओं के बीच संघर्ष को हल करने की प्रक्रिया है जब एक निश्चित तत्व पर एक से अधिक नियम लागू होते हैं । क्योंकि जैसा कि आप शायद पहले से ही एक निश्चित शैली की संपत्ति के लिए एक घोषणा जानते हैं जैसे कि फ़ॉन्ट आकार कई स्टाइलशीट में और कई बार एक स्टाइल स्टाइल के अंदर भी दिखाई दे सकता है।
कैस्केडिंग को समझने के लिए आपको सीएसएस पार्सिंग चरण के साथ शुरू करना होगा क्योंकि पार्सिंग चरण में पहला कदम सीएसएस घोषणाओं का विरोध करना है और दूसरा चरण अंतिम सीएसएस मूल्यों को संसाधित करना है।
अब CSS अलग-अलग स्रोतों से भी आ सकती है। सबसे आम एक सीएसएस है जिसे हम डेवलपर्स लिखते हैं। ये घोषणाएँ जो हम अपनी शैलियों में डालते हैं उन्हें लेखक घोषणाएँ कहते हैं। एक अन्य स्रोत उपयोगकर्ता घोषणाएं हो सकती हैं, जो सीएसएस उपयोगकर्ता से आ रही हैं। उदाहरण के लिए, जब उपयोगकर्ता ब्राउज़र में डिफ़ॉल्ट फ़ॉन्ट आकार बदलता है तो वह उपयोगकर्ता सीएसएस होता है, और अंतिम लेकिन कम से कम डिफ़ॉल्ट ब्राउज़र घोषणाएं नहीं होती हैं।
उदाहरण के लिए, यदि हम एक लिंक के लिए अपने HTML में एक एंकर टैग लगाते हैं और फिर इसे बिल्कुल भी स्टाइल नहीं करते हैं, तो यह आमतौर पर नीले रंग के पाठ के साथ प्रस्तुत किया जाएगा और सही, रेखांकित किया जाएगा। इसे उपयोगकर्ता एजेंट CSS कहा जाता है क्योंकि यह ब्राउज़र द्वारा निर्धारित है। तो झरना इन सभी अलग-अलग स्रोतों से आने वाली सीएसएस घोषणाओं को जोड़ता है, लेकिन एक नियम से अधिक लागू होने पर झरना वास्तव में टकराव को कैसे हल करता है?
ठीक है, चयनकर्ता विशिष्टता पर, महत्व को देखने के लिए, और परस्पर विरोधी घोषणाओं के स्रोत के क्रम में यह निर्धारित करने के लिए कि कौन सा पूर्वता लेता है, और यहां बताया गया है कि यह कैसे काम करता है। पहले कैस्केड अलग-अलग महत्व के परस्पर विरोधी घोषणाओं को देकर शुरू होता है, जहां वे अपने स्रोत पर घोषित किए जाते हैं। सबसे महत्वपूर्ण घोषणाएं महत्वपूर्ण उपयोगकर्ता के साथ चिह्नित उपयोगकर्ता घोषणाएं हैं।
दूसरी सबसे महत्वपूर्ण घोषणाएं महत्वपूर्ण के साथ चिह्नित लेखक घोषणाएं हैं। तीसरा, सामान्य लेखक घोषणाएँ, फिर सामान्य उपयोगकर्ता घोषणाएँ, और अंत में कम से कम महत्वपूर्ण डिफ़ॉल्ट ब्राउज़र घोषणाएँ हैं, जो वास्तव में बहुत कुछ समझ में आता है कि हम ब्राउज़र से डिफ़ॉल्ट रूप से आने वाले इन घोषणाओं को आसानी से अधिलेखित कर सकते हैं।
अब कई बार हम अपने लेखक स्टाइलशीट्स में बिना किसी महत्वपूर्ण कीवर्ड के परस्पर विरोधी नियमों का एक समूह बना लेंगे। यह वास्तव में सबसे आम परिदृश्य है और इस मामले में, सभी घोषणाओं का सटीक समान महत्व है। अब, इस मामले में क्या होता है? यदि कैस्केड ऐसा करता है तो यह घोषणा चयनकर्ताओं की विशिष्टताओं की गणना और तुलना करने के लिए है, और यह है कि यह कैसे काम करता है।
इनलाइन शैलियों में आईडी, उसके बाद कक्षाएं, छद्म कक्षाएं और विशेषता चयनकर्ताओं और उसके बाद अंत में सबसे कम विशिष्ट तत्व और छद्म तत्व चयनकर्ता की उच्चतम विशिष्टता होती है। इसलिए जब हमारे पास परस्पर विरोधी घोषणाएँ होती हैं, जैसा कि हमने पिछली स्लाइड में देखा था कि हमने प्राथमिकताओं के आधार पर उनकी चयनकर्ता विशिष्टता की गणना की है जो मैंने अभी आपको दिखाई है, लेकिन आइए देखें कि हम वास्तव में छोटे उदाहरण के साथ विशिष्टताओं की गणना कैसे करते हैं, यह हमेशा सबसे अच्छा है, सही है।
उपरोक्त उदाहरण से, इन सभी घोषणाओं का एक ही महत्व है, क्योंकि वे सभी लेखक घोषणाएँ हैं। तो आइए उनकी चयनकर्ता विशिष्टताओं की गणना करें ताकि यह पता लगाया जा सके कि पृष्ठभूमि का रंग नीला, हरा, बैंगनी या पीला होगा या नहीं, और हम इसे करते हैं। विशिष्टता वास्तव में केवल एक संख्या नहीं है, बल्कि उन चार श्रेणियों में से प्रत्येक के लिए एक संख्या है जो मैंने आपको पहले दिखाया था। इनलाइन शैलियों, आईडी, कक्षाएं, छद्म तत्व और विशेषताएँ, और अंत में तत्व और इनमें से प्रत्येक के लिए, हम चयनकर्ता में होने वाली घटनाओं की संख्या की गणना करते हैं।
तो यहाँ चयनकर्ता एक में, हमारे पास निश्चित रूप से कोई इनलाइन शैली नहीं है, क्योंकि एक इनलाइन शैली HTML में लिखी जानी है, जो यहाँ नहीं है, इसलिए यह एक शून्य है। हमारे पास यहां कोई आईडी नहीं है, इसलिए यह फिर से एक शून्य है, लेकिन हमारे पास एक वर्ग, बटन वर्ग है। इसलिए वर्गों की श्रेणी के लिए, हमारे पास एक है, और अंत में, यहाँ कोई तत्व चयनकर्ता नहीं है, इसलिए उस एक के लिए भी शून्य है, और यह बात है। चयनकर्ता विशिष्टता शून्य, शून्य, एक, शून्य है।
अब, अब इसकी तुलना दूसरों से करते हैं। अगला भी एक इनलाइन शैली नहीं है, इसलिए पहले वाले के लिए शून्य। अब यहाँ वास्तव में हमारे पास नेवी आईडी के लिए एक आईडी चयनकर्ता है, ठीक है, इसलिए यह आईडी के लिए एक है। हमारे पास दो वर्ग भी हैं दाएं और बटन तो यह वर्ग श्रेणी के लिए एक दो है, और अंत में, यहां दो तत्व चयनकर्ता भी हैं। नौसेना तत्व और div तत्व, जिसका अर्थ है कि यह तत्व श्रेणी के लिए भी दो है। तो अंत में चयनकर्ता की विशिष्टता शून्य है, एक, दो, दो, जो वास्तव में एक अत्यधिक विशिष्ट चयनकर्ता है।
चयनकर्ता संख्या तीन बहुत सरल है। यह सिर्फ एक तत्व चयनकर्ता है और इसलिए विशिष्टता शून्य, शून्य, शून्य, एक है।
अब अंतिम एक, चयनकर्ता संख्या चार। सबसे पहले हमारे पास नेवी आईडी है, इसलिए यह आईडी के लिए एक है। अगला, हमारे पास एक वर्ग है, बटन वर्ग है, और एक छद्म वर्ग भी है, जो मंडराना है, जो कुल मिलाकर वर्ग श्रेणी के लिए इसे दो बनाता है। चूंकि एक तत्व चयनकर्ता भी है अंतिम विशिष्टता शून्य है, एक, दो, एक।
अब आइए जानते हैं कि हम चयन करने के लिए इन नंबरों का उपयोग वास्तव में कैसे करते हैं। हम सबसे विशिष्ट श्रेणी, इनलाइन शैलियों के साथ बाएं से दाएं शुरू होने वाली संख्याओं को देखना शुरू करते हैं। यदि इनलाइन शैलियों के लिए एक के साथ एक चयनकर्ता है, तो अन्य सभी चयनकर्ताओं के खिलाफ जीतता है, क्योंकि यह सबसे विशिष्ट श्रेणी है। खैर, यहाँ ऐसा नहीं है, इसलिए आइडी पर चलते हैं। हम देखते हैं कि चयनकर्ताओं दो और चार के पास एक है जबकि अन्य के पास शून्य है, इसलिए शून्य वाले खेल से बाहर हैं क्योंकि वे कम विशिष्ट हैं तो चयनकर्ता दो और चार आईडी के साथ चयन करते हैं।
अब चूंकि दोनों चयनकर्ताओं के पास आईडी श्रेणी में एक है इसलिए हमें कक्षाओं को आगे बढ़ाना और जांचना होगा। वे दोनों इस श्रेणी में एक दो अभी भी उनके बीच एक टाई है, और अंत में, तत्व श्रेणी में, चयनकर्ता दो में दो हैं जबकि चयनकर्ता चार में केवल एक है और इसलिए हमारे पास यहां एक विजेता है। चयनकर्ता संख्या दो सभी का सबसे विशिष्ट चयनकर्ता है और इसलिए यह हमारे बटन को एक हरे रंग की पृष्ठभूमि देगा ।4 जीतने की घोषणा के मूल्य को कैस्केड मूल्य कहा जाता है क्योंकि यह कैस्केड का परिणाम है।
तो हम इस मामले में घोषित मूल्यों के एक समूह के साथ शुरू करते हैं, नीला, हरा, बैंगनी और पीला उनमें से एक जीतता है और कैस्केड मूल्य बन जाता है, जो हमारे उदाहरण हरे रंग में है।
अब कल्पना कीजिए कि सेक्टर चार में भी दो तत्व होते हैं तो दोनों चयनकर्ता दो और चार की एक ही विशिष्टता होगी, ठीक है। तो इस मामले में क्या होता है और मैं वादा करता हूं कि यह अब ठीक है। खैर, अगर इस बिंदु पर अभी भी एक टाई है तो कोड में लिखा गया अंतिम सीएसएस घोषणा वही है जो लागू होगी। तो फिर से अगर सब कुछ समान है, यदि सभी घोषणाओं के चयनकर्ताओं में एक ही विशिष्टता है तो यह केवल अंतिम घोषणा है जिसे चयनित तत्व को स्टाइल करने के लिए उपयोग किया जाएगा।