Làm cách nào để đặt một quy tắc CSS cho hai thẻ?

Question

Tôi muốn biết cách tôi có thể đặt một cài đặt cho hai lớp khác nhau.

Để đưa ra một ví dụ:

.footer #one .flag li .drop_down form div{ 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
} 
.footer #two .flag li .drop_down form div{ 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
} 

Cả hai quy tắc có cùng một nội dung. Sự khác biệt chỉ là thẻ thứ hai. Có cách nào để làm điều gì đó như thế này không?

.footer >>>#one and #two<<<< .flag li .drop_down form div{ 
     width: 80px; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: 11px; 
     text-align: left; 
     line-height: 1.5; 
     color: #ccc; 
     font-weight:bolder; 
     margin-left: 30px; 
    } 

Answer 1

riêng các selectors với một dấu phẩy:

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    /* Rules */ 
} 

Từ selectors level 3 spec:

Một danh sách bằng dấu phẩy của selectors đại diện cho sự kết hợp của tất cả các yếu tố của mỗi cá nhân được lựa chọn bộ chọn trong danh sách. (Dấu phẩy là U + 002C.) Ví dụ: trong CSS khi một số bộ chọn chia sẻ cùng một khai báo, chúng có thể được nhóm thành danh sách được phân cách bằng dấu phẩy. Khoảng trắng có thể xuất hiện trước và/hoặc sau dấu phẩy.

Answer 2

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div{ 
    ... 
} 

Answer 3

Trong CSS bạn sử dụng một , (dấu phẩy), không may này là trên toàn bộ chọn chứ không phải chỉ là một phần của nó.

Nếu bạn thực sự muốn làm cho nó sạch hơn, bạn có thể cung cấp cho mỗi một mã số duy nhất form div's và sau đó chỉ #form1, #form2.

Bạn có thể tìm thêm thông tin trong "Shorten the comma separated CSS selectors".

Ví dụ:

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
} 

Answer 4

cách nhau dấu phẩy:

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div 
{ 
shared css 
} 

.footer #one .flag li .drop_down form div 
{ 
indvi css for one 
} 

.footer #two .flag li .drop_down form div 
{ 
indvi css for two 
} 

Answer 5

Sử dụng dấu phẩy thay vì quy tắc CSS riêng biệt:

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    width: 80px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-align: left; 
    line-height: 1.5; 
    color: #ccc; 
    font-weight:bolder; 
    margin-left: 30px; 
} 

Answer 6

Như những kẻ khác nói rằng câu trả lời cho câu hỏi của bạn là:

.footer #one .flag li .drop_down form div, 
.footer #two .flag li .drop_down form div { 
    /* Rules */ 
} 

Nhưng vì một id được coi là độc đáo vào trang của bạn, mã của bạn có thể được đơn giản hóa như thế này:

#one .flag li .drop_down form div, 
#two .flag li .drop_down form div { 
    /* Rules */ 
}