Cách ghi đè các thuộc tính của một lớp CSS bằng một lớp CSS khác

Tôi còn khá mới với CSS3 và tôi muốn có thể thực hiện những việc sau:

Khi tôi thêm một lớp vào một phần tử, nó sẽ ghi đè các thuộc tính của một lớp khác được sử dụng trong phần tử cụ thể này.

Hãy nói rằng tôi có

<a class="left carousel-control" href="#carousel" data-slide="prev">

Tôi muốn có thể thêm một lớp được gọi bakground-none, lớp đó sẽ ghi đè nền mặc định trong lớp left.

Cảm ơn!

Có nhiều cách khác nhau trong đó các thuộc tính có thể được ghi đè. Giả sử bạn có

.left { background: blue }

ví dụ: bất kỳ điều nào sau đây sẽ ghi đè nó:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

Hai "chiến thắng" đầu tiên bởi tính cụ thể của bộ chọn; chiếc thứ ba thắng bằng !importantmột công cụ cùn.

Bạn cũng có thể sắp xếp các biểu định kiểu của mình sao cho quy tắc

.background-none { background: none; }

thắng đơn giản bằng cách trật tự, tức là bằng cách sau khi một quy tắc khác không kém phần “mạnh mẽ”. Nhưng điều này đặt ra những hạn chế và đòi hỏi bạn phải cẩn thận trong bất kỳ việc sắp xếp lại các trang định kiểu.

Đây là tất cả các ví dụ về CSS Cascade , một khái niệm quan trọng nhưng bị hiểu nhầm rộng rãi. Nó xác định các quy tắc chính xác để giải quyết xung đột giữa các quy tắc của bảng định kiểu.

PS tôi đã sử dụng leftvà background-nonenhư chúng đã được sử dụng trong câu hỏi. Chúng là những ví dụ về tên lớp không nên được sử dụng, vì chúng phản ánh vai trò hiển thị cụ thể chứ không phải vai trò cấu trúc hoặc ngữ nghĩa.

Chỉ cần sử dụng !importantnó sẽ giúp ghi đè

background:none !important;

Mặc dù nó được cho là một thực hành xấu, !importantcó thể hữu ích cho các lớp tiện ích, bạn chỉ cần sử dụng nó một cách có trách nhiệm, hãy kiểm tra điều này: Khi Sử dụng quan trọng là lựa chọn đúng

Để thay thế cho importanttừ khóa, bạn có thể làm cho bộ chọn cụ thể hơn, ví dụ:

.left.background-none { background:none; }

(Lưu ý: không có khoảng trắng giữa các tên lớp).

Trong trường hợp này, quy tắc sẽ được áp dụng khi cả hai .leftvà .background-noneđược liệt kê trong thuộc tính lớp (bất kể thứ tự hay khoảng cách).

Bạn nên ghi đè bằng cách tăng Tính cụ thể của kiểu dáng. Có nhiều cách khác nhau để tăng Độ đặc hiệu. Việc sử dụng tính !importantcụ thể của hiệu ứng nào, là một thực tiễn không tốt vì nó phá vỡ các tầng tự nhiên trong bảng kiểu của bạn.

Sơ đồ sau được lấy từ css-tricks.com sẽ giúp bạn tạo ra tính cụ thể phù hợp cho phần tử của bạn dựa trên cấu trúc điểm. Cụ thể nào có điểm cao hơn sẽ thắng. Nghe giống như một trò chơi - phải không?

Kiểm tra các phép tính mẫu tại đây trên css-tricks.com . Điều này sẽ giúp bạn hiểu rất rõ khái niệm và chỉ mất 2 phút.

Sau đó, nếu bạn muốn tự mình sản xuất và / hoặc so sánh các thông số kỹ thuật khác nhau, hãy dùng thử Máy tính độ cụ thể này: https://specificity.keegan.st/ hoặc bạn có thể chỉ sử dụng giấy / bút chì truyền thống.

Để đọc thêm, hãy thử MDN Web Docs .

Tất cả tốt nhất cho việc không sử dụng !important.

Nếu bạn liệt kê bakground-nonelớp sau các lớp khác, các thuộc tính của nó sẽ ghi đè lên những thuộc tính đã được thiết lập. Không có nhu cầu sử dụng !importantở đây.

Ví dụ:

.red { background-color: red; }
.background-none { background: none; }

và

<a class="red background-none" href="#carousel">...</a>

Liên kết sẽ không có nền màu đỏ. Xin lưu ý rằng điều này chỉ ghi đè các thuộc tính có bộ chọn ít hơn hoặc cụ thể hơn.

LIFO là cách trình duyệt phân tích cú pháp các thuộc tính CSS..Nếu bạn đang sử dụng Sass, hãy khai báo một biến được gọi là

"$ header-background: red;"

sử dụng nó thay vì chỉ định trực tiếp các giá trị như đỏ hoặc xanh lam. Khi bạn muốn ghi đè, chỉ cần gán lại giá trị cho

"$ header-background: blue"

sau đó

background-color: $ header-background;

nó sẽ ghi đè suôn sẻ. Sử dụng "! Important" không phải lúc nào cũng là sự lựa chọn đúng đắn.. Nó chỉ là một hotfix