CSS
कैस्केडिंग और विशिष्टता

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
खोज…


टिप्पणियों

सीएसएस विशिष्टता एक लेखक को तत्वों के व्यापक सेट के लिए कुछ सामान्य स्वरूपण नियमों को परिभाषित करने और फिर उन्हें एक निश्चित सबसेट के लिए ओवरराइड करने की अनुमति देकर कोड सहमति को बढ़ावा देने का इरादा रखती है।

व्यापक

CSS स्टाइलिंग प्रॉपर्टी के अंतिम मूल्य को निर्धारित करने के लिए कैस्केडिंग और विशिष्टता का एक साथ उपयोग किया जाता है। वे सीएसएस नियम सेट में संघर्षों को हल करने के लिए तंत्र को भी परिभाषित करते हैं।

सीएसएस लोड हो रहा है आदेश

इस क्रम में शैलियाँ निम्नलिखित स्रोतों से पढ़ी जाती हैं:

  1. उपयोगकर्ता एजेंट स्टाइलशीट (ब्राउज़र विक्रेता द्वारा दी गई शैलियाँ)
  2. उपयोगकर्ता स्टाइलशीट (उपयोगकर्ता द्वारा अपने ब्राउज़र पर सेट की गई अतिरिक्त स्टाइलिंग)
  3. लेखक स्टाइलशीट (लेखक का अर्थ है वेबपेज / वेबसाइट का निर्माता)
    • शायद एक या अधिक .css फ़ाइलें
    • HTML दस्तावेज़ के <style> तत्व में
  4. इनलाइन शैलियाँ (HTML तत्व पर style विशेषता में)

किसी तत्व को प्रस्तुत करते समय ब्राउज़र इसी शैली को देखेगा।

संघर्ष कैसे हल होते हैं?

जब केवल एक सीएसएस नियम सेट एक तत्व के लिए एक शैली सेट करने की कोशिश कर रहा है, तो कोई संघर्ष नहीं है, और उस नियम सेट का उपयोग किया जाता है।

जब परस्पर विरोधी सेटिंग्स के साथ कई नियम सेट पाए जाते हैं, तो पहले विशेष नियम, और फिर कैस्केडिंग नियमों का उपयोग किस शैली का उपयोग करने के लिए किया जाता है।

उदाहरण 1 - विशिष्ट नियम 

.mystyle { color: blue; }  /* specificity: 0, 0, 1, 0 */
div { color: red; }        /* specificity: 0, 0, 0, 1 */

<div class="mystyle">Hello World</div>

पाठ किस रंग का होगा? (जवाब देखने के लिए मँडरा)

नीला

पहले विशिष्टता नियम लागू होते हैं, और उच्चतम विशिष्टता "जीत" के साथ होती है।

उदाहरण 2 - समान चयनकर्ताओं के साथ कास्केड नियम

बाहरी सीएसएस फ़ाइल 

.class {
  background: #FFF;
}

आंतरिक सीएसएस (HTML फ़ाइल में) 

<style>
.class {
  background: #000;
}
<style>

इस मामले में, जहां आपके पास समान चयनकर्ता हैं, कैस्केड में किक करता है और निर्धारित करता है कि पिछले एक लोड "जीत" है।

उदाहरण 3 - विशिष्ट नियमों के बाद कैस्केड नियम 

body > .mystyle { background-color: blue; }   /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; }  /* specificity: 0, 0, 1, 1 */

<body class="otherstyle">
  <div class="mystyle">Hello World</div>
</body>

पृष्ठभूमि किस रंग की होगी?

लाल

विशिष्टता नियमों को लागू करने के बाद, नीले और लाल के बीच अभी भी संघर्ष होता है, इसलिए विशिष्ट नियमों के शीर्ष पर कैस्केडिंग नियम लागू किए जाते हैं। कैस्केडिंग नियमों के लोड क्रम को देखता है, चाहे वही .css फ़ाइल के अंदर हो या शैली स्रोतों के संग्रह में। पिछले एक भरी हुई किसी भी पिछले ओवरराइड करता है। इस मामले में, .otherstyle > div नियम "जीतता है"।

एक अंतिम नोट

  • चयनकर्ता विशिष्टता हमेशा पूर्वता लेती है।
  • स्टाइल्सशीट ऑर्डर ब्रेक टाई।
  • इनलाइन शैलियों सब कुछ ट्रम्प।

महत्वपूर्ण घोषणा

!important घोषणा का उपयोग एक नियम को उच्च प्राथमिकता देकर स्टाइल शीट में सामान्य विशिष्टता को ओवरराइड करने के लिए किया जाता है। इसका उपयोग है: property : value !important; 

#mydiv {
    font-weight: bold !important;    /* This property won't be overridden
                                       by the rule below */
}

#outerdiv #mydiv {
    font-weight: normal;            /* #mydiv font-weight won't be set to normal
                                    even if it has a higher specificity because
                                    of the !important declaration above */
}

!important के उपयोग से बचने की जोरदार सिफारिश की जाती है (जब तक कि बिल्कुल आवश्यक न हो), क्योंकि यह सीएसएस नियमों के प्राकृतिक प्रवाह को परेशान करेगा जो आपकी स्टाइल शीट में अनिश्चितता ला सकता है। यह भी नोट करना महत्वपूर्ण है कि जब एक !important तत्व पर एक ही नियम में कई- !important घोषणाएं लागू की जाती हैं, तो उच्च विशिष्टता वाले व्यक्ति को ओना लागू किया जाएगा।

यहां कुछ उदाहरण दिए गए हैं, जहां !important घोषणाओं का उपयोग किया जा सकता है:

  • यदि आपके नियमों को तत्व के किसी भी इनलाइन शैली द्वारा ओवरराइड नहीं किया जाना चाहिए, जो HTML तत्व की style विशेषता के अंदर लिखा गया style ।
  • वेब एक्सेस करने पर उपयोगकर्ता को अधिक नियंत्रण देने के लिए, जैसे कि लेखक की शैली का उपयोग करके, फ़ॉन्ट-आकार का आकार घटाना या घटाना !important ।
  • निरीक्षण तत्व का उपयोग करके परीक्षण और डिबगिंग के लिए।

यह सभी देखें:

चयनकर्ता विशिष्टता की गणना

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

समूह के शामिल उदाहरण
ए आईडी चयनकर्ताओं #foo
बी कक्षा चयनकर्ता
विशेषता चयनकर्ताओं
छद्म कक्षाएं 		.bar
[title] , [colspan="2"]
:hover :nth-child(2)
सी चयनकर्ता टाइप करें
छद्म तत्वों 		div , li
::before , ::first-letter

ग्रुप ए सबसे विशिष्ट है, उसके बाद ग्रुप बी , फिर अंत में ग्रुप सी ।

सार्वभौमिक चयनकर्ता ( * ) और कॉम्बिनेटर (जैसे > और ~ ) की कोई विशिष्टता नहीं है।

उदाहरण 1: विभिन्न चयनकर्ताओं के अनुक्रम की विशिष्टता 

#foo #baz {}      /* a=2, b=0, c=0 */

#foo.bar {}       /* a=1, b=1, c=0 */

#foo {}           /* a=1, b=0, c=0 */

.bar:hover {}     /* a=0, b=2, c=0 */

div.bar {}        /* a=0, b=1, c=1 */

:hover {}         /* a=0, b=1, c=0 */

[title] {}        /* a=0, b=1, c=0 */

.bar {}           /* a=0, b=1, c=0 */

div ul + li {}    /* a=0, b=0, c=3 */

p::after {}       /* a=0, b=0, c=2 */

*::before {}      /* a=0, b=0, c=1 */

::before {}       /* a=0, b=0, c=1 */

div {}            /* a=0, b=0, c=1 */

* {}              /* a=0, b=0, c=0 */

उदाहरण 2: ब्राउज़र द्वारा विशिष्टता का उपयोग कैसे किया जाता है

निम्नलिखित सीएसएस कार्यान्वयन की कल्पना करें: 

#foo {
  color: blue;
}

.bar {
  color: red;
  background: black;
}

यहां हमारे पास एक आईडी चयनकर्ता है जो color को नीला घोषित करता है, और एक वर्ग चयनकर्ता जो color को लाल और background को काला घोषित करता है।

का एक आईडी वाला एक तत्व #foo और के एक वर्ग .bar दोनों घोषणाओं द्वारा चयन किया जाएगा। ID चयनकर्ताओं के पास समूह A विशिष्टता है और वर्ग चयनकर्ताओं के पास समूह B विशिष्टता है। एक आईडी चयनकर्ता वर्ग चयनकर्ताओं की किसी भी संख्या से आगे निकल जाता है। इस वजह से, color:blue; #foo चयनकर्ता और background:black; .bar चयनकर्ता से तत्व पर लागू किया जाएगा। आईडी चयनकर्ता की उच्च विशिष्टता, ब्राउज़र को .bar चयनकर्ता के color घोषणा को अनदेखा करने का कारण .bar ।

अब एक अलग सीएसएस कार्यान्वयन की कल्पना करें: 

.bar {
  color: red;
  background: black;
}

.baz {
  background: white;
}

यहां हमारे पास दो वर्ग चयनकर्ता हैं; जिनमें से एक color को लाल और background को काला घोषित करता है, और दूसरा background को सफेद घोषित करता है।

.bar और .baz दोनों वर्गों के साथ एक तत्व इन दोनों घोषणाओं से प्रभावित होगा, हालांकि हमारे पास जो समस्या है वह यह है कि .bar और .baz दोनों में एक समान समूह B विशिष्टता है। सीएसएस के व्यापक प्रकृति हमारे लिए इस का समाधान करता है: के रूप में .baz के बाद परिभाषित किया गया है .bar , हमारे तत्व लाल रंग के साथ समाप्त होता है color से .bar लेकिन सफेद background से .baz ।

उदाहरण 3: विशिष्टता में हेरफेर कैसे करें

उदाहरण के ऊपर 2 से पिछले टुकड़ा हमारे सुनिश्चित करने के लिए हेरफेर किया जा सकता .bar वर्ग चयनकर्ता के color के बजाय इस बात का प्रयोग किया जाता है घोषणा .baz वर्ग चयनकर्ता। 

.bar {}        /* a=0, b=1, c=0 */
.baz {}        /* a=0, b=1, c=0 */

इसे प्राप्त करने का सबसे सामान्य तरीका यह पता लगाना होगा कि अन्य चयनकर्ताओं को .bar चयनकर्ता अनुक्रम पर क्या लागू किया जा सकता है। उदाहरण के लिए, यदि .bar वर्ग को केवल span तत्वों के लिए लागू किया गया था, तो हम .bar चयनकर्ता को span.bar संशोधित कर सकते हैं। यह इसे एक नया समूह C विशिष्टता प्रदान करेगा, जो कि .baz चयनकर्ता की कमी को दूर करेगा। 

span.bar {}    /* a=0, b=1, c=1 */
.baz {}        /* a=0, b=1, c=0 */

हालाँकि यह हमेशा संभव नहीं हो सकता है कि एक अन्य आम चयनकर्ता को किसी भी तत्व के बीच साझा किया जाए जो .bar वर्ग का उपयोग करता है। इस वजह से, सीएसएस हमें चयनकर्ताओं को विशिष्टता बढ़ाने के लिए डुप्लिकेट करने की अनुमति देता है। केवल .bar बजाय, हम .bar.bar उपयोग कर सकते हैं ( चयनकर्ताओं का व्याकरण, W3C अनुशंसा देखें )। यह अभी भी .bar वर्ग के साथ किसी भी तत्व का चयन करता है, लेकिन अब समूह B विशिष्टता को दोगुना कर दिया गया है: 

.bar.bar {}    /* a=0, b=2, c=0 */
.baz {}        /* a=0, b=1, c=0 */

!important और इनलाइन शैली घोषणाएँ

शैली की घोषणा और HTML style विशेषता द्वारा घोषित शैलियों पर !important ध्वज को किसी भी चयनकर्ता की तुलना में अधिक विशिष्ट माना जाता है। यदि ये मौजूद हैं, तो जो शैली की घोषणा वे प्रभावित करते हैं, उनकी विशिष्टता की परवाह किए बिना अन्य घोषणाओं पर काबू पा लेंगे। यही है, जब तक कि आपके पास एक से अधिक घोषणा नहीं होती है जिसमें एक ही संपत्ति के लिए एक !important ध्वज होता है जो एक ही तत्व पर लागू होता है। फिर, सामान्य विशिष्टता नियम एक दूसरे के संदर्भ में उन गुणों पर लागू होंगे।

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

उन दुर्लभ अपवादों जहां से एक !important पर सिकोड़ी नहीं है, जब एक तरह सामान्य सहायक वर्गों को लागू है .hidden या .background-yellow वर्ग कि हमेशा एक या अधिक प्रॉपर्टी ओवरराइड करने के लिए चाहे वे कहीं भी सामना होता है अपेक्षा की जाती है। और फिर भी, आपको यह जानना होगा कि आप क्या कर रहे हैं। आखिरी बात जो आप चाहते हैं, जब बनाए रखने योग्य सीएसएस लिखते हैं, तो आपके सीएसएस में !important झंडे होते हैं।

एक अंतिम नोट

CSS विशिष्टता के बारे में एक आम गलत धारणा यह है कि समूह A , B और c मानों को एक दूसरे के साथ जोड़ा जाना चाहिए ( a=1, b=5, c=1 => 151)। ऐसी बात नहीं है। अगर ऐसा होता, तो ग्रुप बी या सी सेलेक्टर में से 20 का होना एक सिंगल ग्रुप ए या बी सिलेक्टर को ओवरराइड करने के लिए पर्याप्त होगा। तीन समूहों को विशिष्टता के व्यक्तिगत स्तर के रूप में माना जाना चाहिए। विशिष्टता को एक मूल्य से नहीं दर्शाया जा सकता है।

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

body.page header.container nav div#main-nav li a {}

यह भविष्य में किए गए परिवर्तनों को कठिन बनाता है और उस पृष्ठ को प्रदूषित करता है।

आप यहां अपने चयनकर्ता की विशिष्टता की गणना कर सकते हैं

अधिक जटिल विशिष्टता उदाहरण

div {
    font-size: 7px;
    border: 3px dotted pink;
    background-color: yellow;
    color: purple;
}

body.mystyle > div.myotherstyle {
    font-size: 11px;
    background-color: green;
}

#elmnt1 {
    font-size: 24px;
    border-color: red;
}

.mystyle .myotherstyle {
    font-size: 16px;
    background-color: black;
    color: red;
}

<body class="mystyle">
    <div id="elmnt1" class="myotherstyle">
        Hello, world!
    </div>
</body>

पाठ की सीमाएँ, रंग और फ़ॉन्ट-आकार क्या होंगे?

फ़ॉन्ट आकार:

font-size: 24; , क्योंकि #elmnt1 नियम सेट में <div> प्रश्न के लिए उच्चतम विशिष्टता है, यहां हर संपत्ति सेट है।

सीमा:

border: 3px dotted red; । सीमा-रंग red #elmnt1 नियम सेट से लिया गया है, क्योंकि इसमें उच्चतम विशिष्टता है। सीमा, सीमा-मोटाई, और सीमा-शैली के अन्य गुण div नियम से हैं।

पीछे का रंग:

background-color: green; । background-color div , body.mystyle > div.myotherstyle , और .mystyle .myotherstyle नियम सेट में सेट किया गया है। विशिष्टताएं (0, 0, 1) बनाम (0, 2, 2) बनाम (0, 2, 0) हैं, इसलिए बीच वाला "जीतता है"।

रंग:

color: red; । रंग div और .mystyle .myotherstyle नियम सेट दोनों में सेट किया गया है। उत्तरार्द्ध में (0, 2, 0) और "जीत" की उच्च विशिष्टता है।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow