Làm thế nào tôi có thể áp dụng các kiểu cho nhiều lớp cùng một lúc?

276

Tôi muốn hai lớp có tên khác nhau có cùng thuộc tính trong CSS. Tôi không muốn lặp lại mã.

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

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

Mở rộng đoạn trích

Vì cả hai lớp đều làm cùng một thứ, nên tôi có thể hợp nhất nó thành một. Làm thế nào tôi có thể làm điều đó?

css css-selectors

— Đã ngồi
nguồn

543

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

là những gì bạn đang tìm kiếm.

— Juraj Blahunka
nguồn

6

+1, chính xác những gì tôi đang tìm kiếm. Sau đó, bạn cũng có thể có một mục nhập thứ hai, riêng biệt cho .abc và / hoặc .xyz cho các thuộc tính bạn không muốn áp dụng cho cả hai, ví dụ: .xyz {font-weight: bold;} sẽ kết hợp để tạo .xyz đậm và lề- còn lại 20px nhưng .abc chỉ còn lại lề.

— RyanfaeScotland

64

Bạn có thể có nhiều khai báo CSS cho cùng một thuộc tính bằng cách tách chúng bằng dấu phẩy:

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

— zombat
nguồn

1

mặc dù câu trả lời được chọn là hoàn toàn chính xác, chúng tôi không thể đảm bảo rằng người mới sẽ hiểu những gì nó đang làm. Tôi sẽ đi với một trong những giải thích thêm. Vì nó là "cách câu cá" thay vì "đây là con cá".

— Olgun Kaya

15

Đừng lặp lại CSS của bạn

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

HOẶC LÀ

 a{
    margin-left:20px;
 }

— Nitekurs
nguồn

2

Tôi nghĩ abcnó có nghĩa là một tên lớp .. và xyznhư một tên khác. Đề xuất của bạn là sử dụng tên lớp chung cho các thuộc tính chung không cần thiết và gây nhầm lẫn, đưa ra câu hỏi.

— Arete

3

Nếu bạn sử dụng như sau, mã của bạn có thể hiệu quả hơn bạn đã viết. Bạn nên thêm một tính năng khác.

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

HOẶC LÀ

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

HOẶC LÀ

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

— Fatih Kaan AÇIKGÖZ
nguồn