मैं एक साथ कई कक्षाओं में शैलियों को कैसे लागू कर सकता हूं?

Question

मुझे सीएसएस में समान संपत्ति रखने के लिए अलग-अलग नामों वाली दो कक्षाएं चाहिए। मैं कोड दोहराना नहीं चाहता।

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}

<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

चूंकि दोनों वर्ग समान कार्य कर रहे हैं, इसलिए मुझे इसे एक में विलय करने में सक्षम होना चाहिए। मैं उसे कैसे कर सकता हूँ?

Answer 1

.abc, .xyz { margin-left: 20px; }

वह है जो आप ढूंढ रहे हैं।

Comments

+1, बिल्कुल वही, जिसकी मुझे तलाश थी। फिर आप उन संपत्तियों के लिए .abc और / या .xyz के लिए एक दूसरी, अलग प्रविष्टि रख सकते हैं, जैसे आप .xyz {font-weight: bold;};} को .xyz को बोल्ड और मार्जिन- दोनों में लागू नहीं करना चाहते। 20'x के द्वारा छोड़ी गई लेकिन केवल मार्जिन-वाम में।

— रयानफेस्कॉटलैंड

Answer 2

आपके पास समान गुणों के लिए कई सीएसएस घोषणाओं को कॉमा के साथ अलग करके हो सकता है:

.abc, .xyz {
   margin-left: 20px;
}

Comments

हालाँकि चयनित उत्तर पूरी तरह से सही है लेकिन हम इस बात की गारंटी नहीं दे सकते हैं कि newbies समझ जाएगा कि वह क्या कर रहा है। मैं और समझाऊंगा। चूंकि यह "यहाँ मछली है" के बजाय "मछली कैसे करें" का अधिक है।

— ओलगुन काया

Answer 3

अपने सीएसएस को दोहराएं नहीं

 a.abc, a.xyz{
    margin-left:20px;
 }

या

 a{
    margin-left:20px;
 }

Comments

मुझे लगता है कि abcएक वर्ग के नाम के रूप में था .. और xyzदूसरे के रूप में। आपका सुझाव आम गुणों के लिए एक सामान्य वर्ग के नाम का उपयोग करना है जो प्रश्न को देखते हुए अनावश्यक और भ्रमित है।

— आरती

Answer 4

यदि आप निम्नलिखित के रूप में उपयोग करते हैं, तो आपका कोड आपके द्वारा लिखे गए से अधिक प्रभावी हो सकता है। आपको एक और फीचर जोड़ना चाहिए।

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

या

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

या

a {
margin-left:20px;
width: 100px;
height: 100px;
}