Có cách nào để đặt lại các thuộc tính CSS của đường viền, bán kính đường viền và màu nền không?

Question

Tôi đang sử dụng Twitter bootstrap cho CSS của trang mà tôi đã nhập. Bootstrap định nghĩa: đường viền: 1px rgb cứng (204, 204, 204); màu nền: rgb (255, 255, 255); bán kính đường viền: 3px 3px 3px 3px; cho các yếu tố được chọn.

Tôi muốn đặt lại (bằng cách ghi đè trong CSS của riêng mình) các thuộc tính CSS Bootstrap này. Tôi đã thử: tự động, kế thừa, không. Nhưng không có công việc. Tôi cũng đã thử tiền tố -moz cho bán kính. Không thành công.

Tôi thấy rằng điều này không hiệu quả vì trong Firefox, một lựa chọn không có đường viền và KHÔNG có kiểu viền và không màu nền được hiển thị theo cách tương tự với trình duyệt webkit.

Bạn có thể kiểm tra điều này bằng cách nhận xét các quy tắc này trong Nhà phát triển web -> Kiểm tra -> chế độ xem CSS.

Tôi làm cách nào để thực hiện tất cả điều này mà không cần chạm vào thư viện Bootstrap?

Answer 1

Các khai báo Bootstrap có số specificity cao hơn của bạn.

Bạn có thể kiểm tra điều này bằng cách thêm !important sau khi tuyên bố: border: none !important

Đừng tàu với mã này, tuy nhiên. Để khắc phục đúng cách, hãy sử dụng một lớp hoặc id khác để ghi đè CSS của Bootstrap.

Answer 2

Bạn đã thử !important giải pháp không phải lúc nào cũng là giải pháp tốt nhưng có thể là lý do bạn gặp sự cố, hãy đọc thêm về thời điểm sử dụng phương pháp này here.

Answer 3

-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
-o-border-radius: 0px; 
border-radius: 0px; 
border: 0px; 

Điều đó sẽ đặt lại đường viền. Miễn là các kiểu ưa thích của bạn xuất hiện muộn hơn các kiểu được cung cấp bởi Bootstrap, chúng sẽ được ưu tiên. Ngoài ra, giao diện -moz có thể giúp bạn ghi đè các lần xuất hiện mặc định của Firefox (hoặc đặt lại chúng).

• https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

Answer 4

Để thiết lập lại tài sản, giá trị sử dụng "ban đầu", hoạt động trên tất cả các thuộc tính:

-webkit-border-radius: initial; 
-moz-border-radius: initial; 
-o-border-radius: initial; 
border-radius: initial; 
border: initial;