एकाधिक पहचानकर्ताओं के साथ सीएसएस श्रेणी परिभाषा

Question

मैंने अभी सीएसएस सीखना शुरू कर दिया है और एक उदाहरण में आया है कि मैं पूरी तरह समझ नहीं पा रहा हूं। मैं इसका वर्णन नहीं कर सकता जिसने उत्तर को मुश्किल बना दिया है (इसलिए यदि कोई जवाब पहले से मौजूद है तो मैंने माफ़ी मांगी है)।

मेरा प्रश्न निम्न उदाहरण के बारे में है:

.theme-light.slider-wrapper { 
    background: #fff; 
    padding: 10px; 
} 

मैं समझता हूँ कि सीएसएस में कक्षाएं .name वाक्य रचना जो तब तो जैसे टैग में इस्तेमाल किया जा सकता का उपयोग कर परिभाषित कर रहे हैं:

<div class="name"></div> 

मैं करता हूँ समझ में नहीं आता कि .name1.name2 की "डबल" घोषणा कैसे काम करती है और टैग में इसका उपयोग कैसे किया जाएगा।

संबंधित नोट पर मुझे दी गई उदाहरण वेबसाइट एक टैग में एक आईडी का उपयोग करती है जो स्टाइलशीट में मौजूद नहीं है .. यह कहां परिभाषित किया जा सकता है?

Answer 1

में संदर्भित किया जा करने के लिए हो सकता है कि इस प्रयोग के उदाहरण के लिए स्पष्ट होगा बातें होना चाहिए आप।

निम्नलिखित परिदृश्य की कल्पना करें।

आप होगा:

<div class="general-div">some stuff</div> 
<div class="general-div special">some stuff</div> 
<div class="general-div">some stuff</div> 
<div class="extra-div">some stuff</div> 
<div class="extra-div special">some stuff</div> 

और कहते हैं कि आप चाहते हैं div के ही गुण इस प्रकार है करने के लिए कर सकते हैं:

.general-div {width: 300px; height: 300px; border: 1px solid #000;} 

.extra-div {width: 200px; height: 200px; border: 1px solid #666;} 

लेकिन आप .special वर्ग के साथ .general-div करना चाहते हैं लाल पृष्ठभूमि, और नीली पृष्ठभूमि के लिए विशेष वर्ग के साथ अतिरिक्त div।

आप लिखना होगा:

.general-div.special {background-color: red;} 

.extra-div.special {background-color: blue;} 

आशा है कि यह प्रश्न में स्थिति के उपयोग के ऊपर साफ करता है।

Answer 2

आप

<div class="class1 class2"> 

उपयोग करने के लिए एक वस्तु को कई वर्गों आवेदन करना होगा।

Answer 3

.theme-light.slider-wrapper का मतलब है कि इसमें दोनों कक्षाएं हैं। HTML में यह ऐसा दिखाई दे सकता:

<div class="theme-light slider-wrapper"></div> 

आईडी का सवाल है, ऐसा कोई कारण नहीं है कि HTML में एक आईडी सीएसएस

Answer 4

.className चयनकर्ता के साथ सीएसएस में आप "वर्गनाम" वर्ग के साथ प्रत्येक तत्व के गुणों को परिभाषित कर सकते हैं। प्रत्येक तत्व में अधिक कक्षाएं हो सकती हैं। अधिक वर्गों के साथ एक चयनकर्ता के अर्थ आपके द्वारा उन्हें अपने घोषणाओं में गठबंधन पर निर्भर करता है:

• .class1.class2 केवल तत्व उन दोनों को परिभाषित वर्गों है कि मेल खाएगी।

  .class1.class2 { background: red; } 
  <div class="class1 class2"></div> 
  

• .class1, .class2 साथ तत्वों से मेल खाएगी।Class1 या .class2

  .class1, .class2 { background: yellow; } 
  <div class="class1"></div> 
  <div class="class2"></div> 
  

• .class1 .class2 Class1 साथ तत्वों के भीतर class2 के साथ ही तत्व से मेल खाएगी।

  .class1 .class2 { background: blue; } 
  <div class="class1"> 
      <div class="class2"></div> 
  </div> 
  

Answer 5

कैसे<div class="name1 name2"></div> की तरह डबल वर्गों का उपयोग करने के?

आप div कक्षा name1 और name2 (see live demo) कक्षाएं हैं।

---

क्या.theme-light.slider-wrapper के बारे में?

इसका मतलब है कि आपके तत्व में theme-light और slide-wrapper कक्षाएं (see live demo) दोनों हैं।

यह अधिक तत्वों के लिए अच्छा है। आप कुछ तत्वों को ग्रे पृष्ठभूमि रखना चाहते हैं। कोई बात नहीं! उन्हें कक्षा gray जोड़ें और सीएसएस परिभाषित:

.gray { 
    background: #ddd; 
} 

इसके अलावा, आप की जरूरत है कुछ तत्वों लाल पाठ है। सीएसएस के साथ red-text वर्ग को परिभाषित करें:

.red-text { 
    color: red; 
} 

और अंत अपने पैरा धूसर पृष्ठभूमि और लाल पाठ है। बस gray और red-text दोनों <p class="gray red-text">Lorem ipsum</p> जैसे वर्ग जोड़ें।

Answer 6

यहां आपके प्रश्न के लिए एक विस्तृत स्पष्टीकरण दिया गया है।

से: www.itsmesharath.in