lớp ghi đè khi hai lớp được gán cho một div

Tôi đang tạo một <div>thẻ trong đó tôi muốn áp dụng hai lớp cho một <div>thẻ sẽ là thư viện hình thu nhỏ. Một lớp cho vị thế của nó và lớp kia cho phong cách của nó. Bằng cách này tôi có thể áp dụng phong cách này, tôi đã có một số kết quả kỳ lạ khiến tôi phải đặt câu hỏi.

Có thể gán hai lớp cho một <div>thẻ không? Nếu vậy, cái nào vượt qua cái kia hoặc cái nào được ưu tiên?

Nhiều lớp có thể được gán cho một div. Chỉ cần tách chúng trong tên lớp bằng dấu cách như sau:

<div class="rule1 rule2 rule3">Content</div>

Div này sau đó sẽ phù hợp với bất kỳ quy tắc phong cách cho ba selectors lớp khác nhau: .rule1, .rule2và .rule3.

Các quy tắc CSS được áp dụng cho các đối tượng trong trang khớp với bộ chọn của chúng theo thứ tự mà chúng gặp trong biểu định kiểu và nếu có xung đột giữa hai quy tắc (nhiều hơn một quy tắc cố gắng đặt cùng một thuộc tính), thì tính cụ thể của CSS sẽ xác định quy tắc được ưu tiên.

Nếu đặc tính CSS giống nhau đối với các quy tắc xung đột, thì quy tắc sau (quy tắc được xác định sau trong biểu định kiểu hoặc trong biểu định kiểu mới hơn) sẽ được ưu tiên. Thứ tự của các tên lớp trên bản thân đối tượng không quan trọng. Thứ tự của các quy tắc kiểu trong biểu định kiểu là vấn đề quan trọng nếu tính cụ thể của CSS giống nhau.

Vì vậy, nếu bạn có phong cách như thế này:

.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Sau đó, vì cả hai quy tắc đều khớp với div và có cùng đặc tính CSS chính xác, nên quy tắc thứ hai xuất hiện sau nên nó sẽ được ưu tiên và nền sẽ có màu đỏ.

Nếu một quy tắc có độ đặc hiệu CSS cao hơn ( div.rule1điểm cao hơn .rule2):

div.rule1 {
    background-color: green;
}

.rule2 {
    background-color: red;
}

Sau đó, nó sẽ được ưu tiên và màu nền ở đây sẽ là màu xanh lá cây.

Nếu hai quy tắc không xung đột:

.rule1 {
    background-color: green;
}

.rule2 {
    margin-top: 50px;
}

Sau đó, cả hai quy tắc sẽ được áp dụng.

Trên thực tế, lớp được xác định cuối cùng trong css - được áp dụng trên div của bạn.

kiểm tra nó ra:

màu đỏ cuối cùng trong css

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

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

vs

màu xanh cuối cùng trong css

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

<div class="blue red">blue red</div>
<div class="red blue">red blue</div>

Nếu bạn hỏi về việc chúng có cùng thuộc tính thì theo quy tắc CSS, nó sẽ lấy câu lệnh cuối cùng.

<div class="red green"></div>

CSS

.red{
 color:red;
}
.green{
 color:green;
}

Theo ví dụ trên, nó lấy câu lệnh cuối cùng theo cây css là .green .

Lớp được định nghĩa cuối cùng trong CSS có quyền ưu tiên, nếu không có gì khác được áp dụng.

Đọc phần ưu tiên CSS để xem nó hoạt động như thế nào.

Nhiều lớp có thể được gán cho một phần tử, bạn chỉ cần tách chúng bằng dấu cách

<div class="myClass aSecondClass keepOnClassing stayClassySanDiego"></div>

Do phân tầng trong CSS, các quy tắc ghi đè gần nhất với cuối tài liệu sẽ được áp dụng cho phần tử.

Vì vậy, nếu bạn có

.myClass
{
    background: white;
    color: blue;
}

.keepOnClassing
{
    color: red;
}

Màu đỏ sẽ được sử dụng, nhưng không phải là màu nền vì nó không bị ghi đè.

Bạn cũng phải tính đến tính cụ thể của CSS, nếu bạn có bộ chọn cụ thể hơn, bộ chọn này sẽ được sử dụng:

.myClass
{
    background: white;
    color: blue;
}

div.myClass.keepOnClassing
{
    background: purple;
    color: red;
}

.stayClassySanDiego
{
    background: black;
}

Bộ chọn thứ hai ở đây sẽ được sử dụng vì nó cụ thể hơn.

Bạn có thể xem tất cả ở đây .