एक ही तत्व के लिए दो सीएसएस कक्षाएं कैसे लागू करें

Question

क्या मैं एक दिव्य या अवधि या किसी भी HTML तत्व के लिए 2 कक्षाएं लागू कर सकता हूं? उदाहरण के लिए:

<a class="c1" class="c2">aa</a>

मैंने कोशिश की और मेरे मामले में c2 लागू नहीं होता है। मैं एक ही बार में दोनों वर्गों को कैसे लागू कर सकता हूं?

Answer 1

1) व्हॉट्सएप ( रेफरी ) द्वारा अलग किए गए वर्ग विशेषता के अंदर कई वर्गों का उपयोग करें :

<a class="c1 c2">aa</a>

2) उन तत्वों को लक्षित करने के लिए जिनमें सभी निर्दिष्ट वर्ग हैं, इस CSS चयनकर्ता ( कोई स्थान नहीं ) ( रेफरी ) का उपयोग करें:

.c1.c2 {
}

Answer 2

दोनों क्लास स्ट्रिंग्स को एक सिंगल क्लास एट्रिब्यूट वैल्यू में शामिल करें, जिसके बीच में जगह हो।

<a class="c1 c2" > aa </a>

Answer 3

जैसा कि दूसरों ने बताया है, आप बस उन्हें एक स्थान के साथ परिसीमन करते हैं।

हालांकि, यह जानना कि चयनकर्ता कैसे काम करते हैं, यह भी उपयोगी है।

HTML के इस टुकड़े पर विचार करें ...

<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>

.a { ... }चयनकर्ता के रूप में उपयोग करना पहले और तीसरे का चयन करेगा। हालाँकि, यदि आप एक का चयन करना चाहते हैं जिसमें दोनों हैं aऔर b, आप चयनकर्ता का उपयोग कर सकते हैं .a.b { ... }। ध्यान दें कि यह IE6 में काम नहीं करेगा, यह बस .b(पिछले एक) का चयन करेगा ।

Answer 4

<a class="c1 c2">aa</a>

Answer 5

यह बहुत स्पष्ट है कि एकल div में दो वर्गों को जोड़ने के लिए, पहले आपको कक्षाएं उत्पन्न करनी होंगी और फिर उन्हें संयोजित करना होगा। इस प्रक्रिया का उपयोग परिवर्तन करने और नहीं को कम करने के लिए किया जाता है। कक्षाओं के लिए। स्क्रैच से वेबसाइट बनाने वालों ने ज्यादातर इस प्रकार के तरीकों का इस्तेमाल किया। वे दो वर्ग बनाते हैं पहला वर्ग रंग के लिए है और दूसरा वर्ग चौड़ाई, ऊँचाई, फ़ॉन्ट-शैली आदि की स्थापना के लिए है। जब हम दोनों वर्गों को जोड़ते हैं तो पहली कक्षा और दूसरी कक्षा दोनों प्रभावी होती हैं।

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

Answer 6

एक जगह के साथ उन्हें अलग करें।

<div class="c1 c2"></div>

Answer 7

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

Comments

हालांकि यह सवाल का जवाब दे सकता है, कृपया यह भी बताएं कि आपका कोड क्या करता है और यह प्रारंभिक समस्या को हल क्यों करता है।

— 11:14 पर user1438038