Bagaimana saya bisa menerapkan gaya ke beberapa kelas sekaligus?

277

Saya ingin dua kelas dengan nama berbeda memiliki properti yang sama di CSS. Saya tidak ingin mengulangi kode itu.

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

Karena kedua kelas melakukan hal yang sama, saya harus dapat menggabungkannya menjadi satu. Bagaimana saya bisa melakukan itu?

css css-selectors duduk
sumber

Jawaban:

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

adalah apa yang kamu cari.

Juraj Blahunka
sumber
6
+1, persis apa yang saya cari. Anda juga dapat memiliki entri kedua yang terpisah untuk .abc dan / atau .xyz untuk properti yang tidak ingin Anda terapkan pada keduanya, misalnya .xyz {font-weight: bold;} akan bergabung untuk membuat .xyz bold dan margin- ditinggalkan oleh 20px tetapi .abc hanya margin-kiri.
RyanfaeScotland
64

Anda dapat memiliki beberapa deklarasi CSS untuk properti yang sama dengan memisahkannya dengan koma:

.abc, .xyz {
   margin-left: 20px;
}
zombat
sumber
1
walaupun jawaban yang dipilih sepenuhnya benar, kami tidak dapat menjamin bahwa pemula akan mengerti apa yang dilakukannya. Saya akan pergi dengan yang dijelaskan lebih lanjut. Karena lebih dari "cara memancing", bukan "di sini adalah ikan".
Olgun Kaya
15

Jangan Ulangi CSS Anda

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

ATAU

 a{
    margin-left:20px;
 }
Nitekurs
sumber
2
Saya pikir abcitu dimaksudkan sebagai satu nama kelas .. dan xyzsebagai yang lain. Saran Anda adalah menggunakan nama kelas umum untuk properti umum yang tidak perlu dan membingungkan, mengingat pertanyaannya.
Arete
4

Jika Anda menggunakan sebagai berikut, kode Anda bisa lebih efektif daripada yang Anda tulis. Anda harus menambahkan fitur lain.

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

ATAU

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

ATAU

a {
margin-left:20px;
width: 100px;
height: 100px;
}
Fatih Kaan AÇIKGÖZ
sumber