Tôi đã nhập một biểu định kiểu khác bằng cách sử dụng @import trong tệp trang tính kiểu chính. Tôi muốn những thay đổi tôi đã thực hiện trong biểu định kiểu @import để ghi đè lên biểu định kiểu chính. Điều này có thể không?Làm cách nào để nhận biểu định kiểu @import của tôi để ghi đè biểu định kiểu chính?
Nếu mục tiêu của bạn là ghi đè kiểu bằng cách nhập biểu định kiểu khác, bạn nên sử dụng thứ tự ưu tiên.
<head>
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="style-override.css" rel="stylesheet" type="text/css" />
</head>
Ở đây, style.css là bản gốc và style-override.css sẽ chứa css tùy chỉnh mới của bạn. Các kiểu này sẽ ghi đè kiểu từ style.css. Điều này có nghĩa là bạn sẽ không cần sử dụng !important vì kiểu bị ghi đè.
Tránh quan trọng bất cứ khi nào bạn có thể.
Để làm @import
<style type="text/css">
@import url("style.css");
@import url("style-override.css");
</style>
Cũng như một mặt lưu ý nếu bạn thà loại bỏ tất cả các phong cách từ trang, sử dụng một thiết lập lại css.
<style type="text/css">
@import url("style.css");
@import url("reset.css");
@import url("style-override.css");
</style>
Kiểm tra đặt lại CSS tại http://meyerweb.com/eric/tools/css/reset/ và thêm lại vào reset.css.
điều này làm việc cảm ơn! – Kenshi
@import biểu định kiểu thứ hai ở cuối đầu tiên.
Bạn đang bối rối !important và @import
Đã cố gắng thêm @i mport ở cuối nó không tải css nữa. Tôi không muốn sử dụng, quan trọng vì tôi sẽ phải làm điều đó vì mọi thứ tôi muốn thay đổi phải có một cách dễ dàng hơn. – Kenshi
Nếu stylesheet thứ hai của bạn sử dụng bộ chọn tương tự, sau đó nó nên ghi đè lên đầu tiên mà không cần bất kỳ vấn đề. CSS có thứ tự ưu tiên rất nghiêm ngặt để xác định cái nào nên được sử dụng, nhưng nếu tất cả khác bằng nhau và hai kiểu có cùng mức ưu tiên, thì nó sẽ sử dụng thứ tự được chỉ định cuối cùng. Điều này cho phép bạn ghi đè kiểu chỉ bằng cách lặp lại cùng một bộ chọn sau này.
Ngoại lệ duy nhất cho điều này là nếu kiểu đầu tiên được chỉ định là !important. Trong trường hợp này, rất khó để ghi đè lên nó. Thậm chí chỉ định một kiểu khác là !important có thể không phải lúc nào cũng hoạt động (tôi đã thấy các trường hợp nó hoạt động trong một số trình duyệt nhưng không hoạt động với một số trình duyệt khác).
Vì vậy, nếu biểu định kiểu trước đó sử dụng !important thì bạn có thể gặp sự cố khi ghi đè. Nhưng nếu không, nó sẽ khá đơn giản.
Giải pháp này hoạt động hoàn hảo cho tôi.
Tạo bản sao của main.css và đổi tên thành style.css. Trong các tệp main.css xóa tất cả và quá khứ:
@import url("style.css");
@import url("style-override.css");
Thats all.
Bạn cũng có thể sử dụng tên lớp cụ thể hơn - ví dụ nếu bạn muốn thay đổi
div#sample {
max-width: 75%;
}
về sử dụng css mới
body div#sample {
max-width: 75%;
}
Chỉ cần ghi nhớ, đó là thừa năng lực selectors không phải là tốt nhất ý tưởng;)
Thực hiện @import sau biểu định kiểu chính và bạn nên ổn định –
Chỉ cần thử nó và bây giờ nó không còn tải – Kenshi