CSS của tôi bị ghi đè bởi Bootstrap CSS

Question

Tôi muốn thêm GWT-Bootstrap vào dự án đã bắt đầu của mình. Tôi đã sử dụng nó, nhưng Bootstrap CSS sẽ ghi đè mọi CSS khác. Kết quả là tất cả các phần tử giao diện người dùng trước đó của tôi được trộn lẫn.

Lề, kích thước văn bản và nhiều yếu tố không phù hợp nữa. Tôi không thể sử dụng Bootstrap vì tất cả các phần còn lại của dự án là không sử dụng được. Tôi muốn làm một sự thay đổi tiến bộ để Bootstrap và giữ những thứ cũ như nó được.

Tôi muốn có CSSs tôi trong thứ tự ưu tiên sau:

• MyApp
• GWT
• Bootstrap

Tôi muốn yêu cầu chúng trong * .gwt.xml của tôi mà không thành công:

<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="MyApp.css" /> 

Điều gì tôi có thể làm không?

Answer 1

Ưu tiên của việc sử dụng phong cách được thúc đẩy bởi nhiều các thuật toán phức tạp hơn là một thứ tự bao gồm trong HTML. Kiểu CSS được chọn với quy tắc lựa chọn cụ thể nhất, trong đó quy tắc nội tuyến được xem là cụ thể hơn sau đó được đính kèm bên ngoài, sau đó chọn theo ID, sau đó là lớp và ở lựa chọn cuối cùng có tên thẻ. Ví dụ, đoạn <p id="xyz" class="xyz"> sẽ có màu đỏ độc lập với thứ tự của quy tắc:

.xyz { 
    color: blue; 
} 
#xyz { 
    color: red; 
} 

Nếu có hai nguyên tắc với các lựa chọn loại tương tự, các vấn đề số lượng. Vì vậy, lựa chọn .xyz .abc là "mạnh hơn" sau đó .qwerty.

Nếu hai nguyên tắc có lựa chọn tương đương về số liệu trong mỗi thể loại, sau đó, theo thứ tự cuối rất được đưa vào tài khoản ...

Bạn cũng có thể buộc một trật tự khác nhau với các chỉ thị !important.

Read more về từ khóa đó bằng từ khóa "độ đặc hiệu CSS".

Answer 2

Cách ghi đè kiểu làm việc là lần tải cuối cùng được chiến thắng.

Vì vậy, nếu bạn đang mong đợi các phong cách từ GWT-Bootstrap để ghi đè Bootstrap CSS sau đó bạn muốn đặt mua một cái gì đó để stylesheet hơn như thế này:

<stylesheet src="css/bootstrap.min.css" /> 
<stylesheet src="gwt/clean/clean.css" /> 
<stylesheet src="css/gwt-bootstrap.css" /> 
<stylesheet src="MyApp.css" />