Dấu phẩy trong CSS, nhiều bộ chọn sử dụng cùng một CSS

Question

.Resource table.Tbl td 
{ /* some css*/ } 

.Resource table.Tbl td.num 
{ /* some css 2*/ } 

.Resource table.Tbl td.num span.icon 
{ /* some css 3*/ } 

.Resource table.Tbl2 td 
{ /* some css*/ } 

.Resource table.Tbl2 td.num 
{ /* some css 2*/ } 

.Resource table.Tbl2 td.num span.icon 
{ /* some css 3*/ } 

trong đó CSS ​​cho Tbl và Tbl2 phải giống nhau.

.Resource table.Tbl, table.Tbl2 td { /* some css*/ } 

không hoạt động.

Làm cách nào để đạt được điều này mà không cần sao chép toàn bộ dòng?

Answer 1

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ } 

Bạn nên thêm đường dẫn tổ tiên đầy đủ cho cả hai quy tắc. Không chỉ nơi bạn thấy sự khác biệt.

Answer 2

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css */ } 

Bạn cần phải lặp lại những thứ trước và sau khi table.TblX, bởi vì không có cách nào để nhóm các nhà điều hành , có độ ưu tiên cao hơn so với hậu duệ selector  .

Answer 3

Bạn không thể (không phải trên mọi trình duyệt, đọc tiếp).

Mỗi bộ chọn độc lập, thật không may.

Đây là một trong số CSS's annoying issues.

Có :any(), có thể làm những gì bạn muốn nhưng hỗ trợ trình duyệt bị giới hạn.

Bạn có thể thực hiện việc này bất cứ lúc nào bạn muốn và xử lý trước bằng ngôn ngữ phía máy chủ, vì vậy nó sẽ xuất ra bộ chọn độc lập.

LESS là phổ biến.

Answer 4

.Resource table.Tbl, table.Tbl2 td { /* some css*/ } 

bạn sắp hoàn tất. Tôi nghĩ bạn có nghĩa là

.Resource table.Tbl td, table.Tbl2 td { /* some css*/ } 

lưu ý thêm td - bạn cần chỉ định "đường dẫn" đầy đủ cho từng phần tử.

Trình xử lý trước CSS như LessCSS các cấu trúc cú pháp cung cấp giao dịch với các cấu trúc lặp đi lặp lại dễ dàng hơn.