Stilleri aynı anda birden fazla sınıfa nasıl uygulayabilirim?


277

Farklı adlara sahip iki sınıfın CSS'de aynı özelliğe sahip olmasını istiyorum. Kodu tekrarlamak istemiyorum.

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}
<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

Her iki sınıf da aynı şeyi yaptığından, onu bir araya getirebilmeliyim. Bunu nasıl yapabilirim?

Yanıtlar:


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

aradığınız şey bu.


6
+1, tam olarak aradığım şey. Daha sonra, hem .xyz {font-weight: bold;} için uygulamak istemediğiniz özellikler için .abc ve / veya .xyz için ikinci, ayrı bir girişiniz olabilir .xyz kalın ve kenar boşluğu- 20 piksel kaldı ama .abc sadece kenar boşluğu bıraktı.
RyanfaeScotland

64

Aynı özellikler için virgülle ayırarak birden fazla CSS bildiriminiz olabilir:

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

1
Seçilen cevap tamamen doğru olmasına rağmen, yeni başlayanların ne yaptığını anlayacağını garanti edemeyiz. Ben daha fazla açıkladı gitmek istiyorum. "Balık burada" yerine "nasıl balık" daha fazla olduğu için.
Olgun Kaya

15

CSS'nizi Tekrar Etmeyin

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

VEYA

 a{
    margin-left:20px;
 }

2
Sanırım abcbir sınıf adı ve xyzbaşka bir sınıf demekti . Sizin önerileriniz, ortak özellikler için soruyu dikkate alarak, gereksiz ve kafa karıştırıcı olan ortak bir sınıf adı kullanmaktır.
Arete

3

Aşağıdaki gibi kullanırsanız, kodunuz yazdığınızdan daha etkili olabilir. Başka bir özellik eklemelisiniz.

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

VEYA

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

VEYA

a {
margin-left:20px;
width: 100px;
height: 100px;
} 
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.