कक्षा जब दो वर्गों को एक div को सौंपी जाती है

Question

मैं एक <div>टैग बना रहा था जिसमें मैं एक <div>टैग के लिए दो कक्षाएं लागू करना चाहता था जो एक थंबनेल गैलरी होगी। एक वर्ग अपनी स्थिति के लिए और दूसरा वर्ग अपनी शैली के लिए। इस तरह मैं शैली को लागू कर सकता था, मुझे कुछ अजीब परिणाम मिल रहे थे जो मुझे एक प्रश्न के लिए ला रहे थे।

क्या दो वर्गों को एक <div>टैग सौंपा जा सकता है ? यदि हां, तो कौन सा दूसरे को पछाड़ देता है या कौन सी प्राथमिकता है?

Answer 1

कई वर्गों को एक डिव को सौंपा जा सकता है। उन्हें इस तरह से रिक्त स्थान के साथ वर्ग नाम में अलग करें:

<div class="rule1 rule2 rule3">Content</div>

इस div तो तीन अलग-अलग वर्ग चयनकर्ताओं के लिए किसी भी शैली नियमों से मेल होगा: .rule1, .rule2और .rule3।

सीएसएस नियम पृष्ठ में उन वस्तुओं पर लागू होते हैं जो उनके चयनकर्ताओं से उसी क्रम में मेल खाती हैं, जिनका वे शैली पत्रक में सामना करते हैं और यदि दो नियमों के बीच टकराव होता है (एक से अधिक नियम एक ही विशेषता को सेट करने की कोशिश कर रहे हैं), तो CSS विशिष्टता निर्धारित करती है कि नियम पूर्वता लेता है।

यदि सीएसएस विशिष्टता परस्पर विरोधी नियमों के लिए समान है, तो बाद में एक (स्टाइलशीट में या बाद में स्टाइलशीट में परिभाषित एक) पूर्वता लेता है। ऑब्जेक्ट पर वर्ग नामों का क्रम ही मायने नहीं रखता है। यह स्टाइल शीट में शैली के नियमों का क्रम है जो सीएसएस विशिष्टता समान होने पर मायने रखता है।

तो, अगर आपके पास इस तरह की शैलियाँ थीं:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

फिर, चूंकि दोनों नियम div से मेल खाते हैं और बिल्कुल समान सीएसएस विशिष्टता है, तो दूसरा नियम बाद में आता है इसलिए इसकी पूर्वता होगी और पृष्ठभूमि लाल होगी।

---

यदि एक नियम में सीएसएस विशिष्टता ( div.rule1उच्चतर स्कोर .rule2) होती है:

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

फिर, यह पूर्वता लेगा और यहां की पृष्ठभूमि का रंग हरा होगा।

---

यदि दो नियम संघर्ष नहीं करते हैं:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

फिर, दोनों नियमों को लागू किया जाएगा।

Comments

+1 सीएसएस विशिष्टता की व्याख्या करने वाला एक और शानदार लिंक: maxdesign.com.au/articles/css-cascade

— Fabian Barney

नीचे दिए गए उत्तर मुझे लगता है कि अगर मैं गलत नहीं हूं तो क्या अधिक सही है?

— nagates

@nagates - आपके हिसाब से कौन सा उत्तर अधिक सही है और क्यों? कई जवाब "नीचे" हैं, इसलिए मुझे नहीं पता कि आप किसका उल्लेख कर रहे हैं और यह नहीं जानते कि आप इसे "अधिक सही" क्यों मानते हैं। यदि आप अपने विचारों को स्पष्ट कर सकते हैं तो मुझे अपने उत्तर को सुधारने या स्पष्ट करने में खुशी होगी।

— jfriend00

jfriend00: नीचे दिए गए @ erez-sason द्वारा उत्तर वह है जिसका वह उल्लेख कर रहा है। यह अजीब है क्योंकि मैंने सोचा था कि यह काम किया है जैसे कि आपने उल्लिखित किया है, लेकिन उनके उदाहरण स्पष्ट रूप से उनके वर्णन के तरीके पर काम करते हैं। मुझे आश्चर्य है कि अगर एम्बेडेड शैलियों और लिंक्ड शैलियों के बीच कोई अंतर है।

— एडम मैककोमिक

@AdamMcCormick - मेरे उत्तर में पहले से ही मेरे द्वारा दिए गए उदाहरणों में से एक के रूप में उस उत्तर की जानकारी है: फिर, चूंकि दोनों नियम div से मेल खाते हैं और बिल्कुल समान सीएसएस विशिष्टता है, तो दूसरा नियम बाद में आता है, इसलिए इसकी पूर्वता और पृष्ठभूमि होगी लाल होगा। । मैं कई संभावित परिदृश्य दिखाता हूं और उन सभी को समझाता हूं, केवल एक परिदृश्य को नहीं। ओपी उनके कोड के साथ विशिष्ट नहीं था इसलिए मैं सामान्य स्पष्टीकरण के लिए गया था जिसमें कई विकल्प शामिल हैं और सबसे सरल विकल्प भी शामिल है।

— jfriend00

Answer 2

दरअसल, सीएसएस में अंतिम वर्ग को परिभाषित किया जाता है - जो आपके div पर लागू होता है।

इसकी जांच - पड़ताल करें:

लाल पिछले सीएसएस में

.blue{ color: blue; }
.red { color: red;  }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

बनाम

नीले रंग की सीएसएस में पिछले

.red { color: red;  }
.blue{ color: blue; }

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

Comments

यह एक बेहतर जवाब है। स्वीकृत उत्तर भ्रामक है।

— एसडी 10

Answer 3

यदि आप पूछते हैं कि उनके पास समान संपत्ति है तो सीएसएस नियम के अनुसार यह अंतिम विवरण है।

<div class="red green"></div>

सीएसएस

.red{
 color:red;
}
.green{
 color:green;
}

उपरोक्त उदाहरण के अनुसार यह css ट्री के अनुसार अंतिम विवरण लेता है जो कि .green है ।

Answer 4

सीएसएस में अंतिम रूप से परिभाषित वर्ग की प्राथमिकता है, अगर कुछ और लागू नहीं होता है।

सीएसएस प्राथमिकता पर पढ़ें कि यह कैसे काम करता है।

Comments

क्या आपका मतलब शारीरिक रूप से वास्तविक सीएसएस में ही है, या सूची में अंतिम वर्गनाम है?

— ब्रेन 2000

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

— डेविड स्पेक्टर

Answer 5

कई कक्षाएं एक तत्व को सौंपी जा सकती हैं, आप उन्हें एक स्थान के साथ अलग करते हैं

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

सीएसएस में कैस्केड के कारण, दस्तावेज़ के नीचे निकटतम ओवरराइटिंग नियम तत्व पर लागू होंगे।

तो अगर आपके पास है

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

लाल रंग का उपयोग किया जाएगा, लेकिन पृष्ठभूमि का रंग नहीं क्योंकि यह ओवरराइट नहीं किया गया था।

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

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

यहां दूसरा चयनकर्ता का उपयोग किया जाएगा क्योंकि यह अधिक विशिष्ट है।

आप इसे यहां पर देख सकते हैं ।

Comments

सभी समय के सर्वश्रेष्ठ वर्ग के नाम (साथ ही पूर्ण और सटीक) के लिए उत्कीर्ण

— ओलिवर टर्नर