Đặt cùng một giá trị cho nhiều thuộc tính (CSS)

Question

Điều này có vẻ như một câu hỏi ngu ngốc như vậy nhưng tôi không thể tìm thấy câu trả lời ở bất kỳ đâu.

Có cách nào để thiết lập nhiều thuộc tính CSS để một giá trị

border-left, border-right: 1px solid #E2E2E2; 

cách mà bạn có thể làm với selectors?

.wrapper, .maindiv { ... } 

Answer 1

Không. Nhưng ví dụ, bạn có thể làm điều này:

border: solid #E2E2E2; 
border-width: 0 1px; 

Các thuộc tính mà có thể có giá trị riêng biệt cho top, right, bottom, và để lại (ví dụ, border- *, lợi nhuận, đệm) có thể thường được kết hợp trong một thuộc tính duy nhất.

Answer 2

Không thể, trừ khi bạn làm:

border: 1px solid #E2E2E2; 

đồi khế, đồi bộ biên giới như nhau trên tất cả các bên. Nếu bạn muốn kiểm soát chúng riêng lẻ, bạn phải viết chúng như là các câu lệnh riêng biệt.

Lưu ý rằng trong một số trường hợp, bạn có thể đặt nhiều giá trị cho một thuộc tính, nhưng bạn không thể có nhiều thuộc tính với một giá trị trong một tuyên bố.

Answer 3

Không thể với đồng bằng css, nhưng bạn có thể xem scss hoặc less có thể có giải pháp cho sự cố của bạn.

Một giải pháp với css đơn giản như sau:

border: 1px solid #E2E2E2; 
border-width: 0px 1px; 

Answer 4

Nếu các thuộc tính có liên quan, như là trường hợp với border-left và border-right, thường có một thuộc tính phổ biến mà cho phép bạn cài đặt chúng:

border: 1px solid #e2e2e2; 

Mặt khác, có một số thư viện như là Less CSS ngoài đó mở rộng CSS để bạn có thể dễ dàng nhóm các thuộc tính và thuộc tính liên quan.

Answer 5

CSS không cho phép kiểm soát như vậy. Giải pháp thay thế là sử dụng quy tắc lớn hơn, sau đó hạn chế quy tắc đó, sau đó hạn chế quy tắc đó:

border: 1px solid #E2E2E2; 
border-top: 0; 
border-bottom: 0; 

Nhưng bạn kết thúc bằng nhiều mã hơn. Một giải pháp khác là sử dụng CSS "biên dịch", như SASS hoặc Less

Answer 6

Nếu bạn đang sử dụng sass, hãy thử này:

@mixin border($properties , $value){ 
    @each $property in $properties{ 
     border-#{$property}: $value; 
    } 
} 

selector{ 
    @include border(left right, 1px solid #E2E2E2); 
}