CSS - Quy tắc chiến binh (trọng lượng)

Bạn có biết rằng CSS khẳng định một trọng số cụ thể cho từng quy tắc kiểu không? Đây là khía cạnh rất quan trọng của CSS vì nó sẽ tránh mọi sự không nhất quán giữa những gì bạn muốn nhận và những gì bạn nhận được trong thực tế.

Một ví dụ:

Hãy thử mã HTML sau:

 div {màu nền: màu xanh;} 

Kết quả là bạn sẽ nhận được một hình vuông màu xanh 100X100 px.

Bây giờ thêm một lớp cho nó:

 div {màu nền: xanh dương;}. MaDiv {màu nền: đỏ;} 

Hình vuông chuyển sang màu đỏ!

Bây giờ sử dụng ID:

 div {màu nền: màu xanh;} .maDiv {màu nền: màu đỏ;} #maDiv {màu nền: màu vàng;} 

Hình vuông bây giờ có màu vàng vì ID mạnh hơn lớp.

Tiếp theo sử dụng một định nghĩa kiểu thẻ ithe:

 div {màu nền: xanh dương;}. MaDiv {màu nền: đỏ;} # MaDiv {màu nền: vàng;} 

Hình vuông chuyển sang màu xanh lá cây: trong khi trên lý thuyết, bốn màu khác nhau đã được gán cho nó!

Trọng lượng

Những kết quả này là hậu quả của trọng số (còn được gọi là quy tắc ưu tiên) CSS:

• Trọng lượng của thẻ là 1
• Trọng lượng của một lớp là 10.
• Trọng lượng của một ID là 100.
• Trọng lượng của một thuộc tính phong cách là 1000.

Đây là các trọng số cơ bản, có các loại khác, ví dụ, các lớp giả (: hover, : after, : tập trung ...). Ví dụ thuộc tính CSS: hover chỉ thêm một chút trọng lượng cho một phần tử khi con trỏ chuột được chuyển qua.

Sự tích lũy trọng lượng

Một quy tắc phong cách sau đó có thể có một trọng lượng trung gian. Thật vậy, chồng trọng lượng.

Thí dụ:

 div {màu nền: màu xanh;} .maDiv {màu nền: màu đỏ;} .maDiv {màu nền: màu vàng;} 

Như bạn có thể thấy, tôi có một phần tử (trọng số 1) và hai lớp bằng nhau (trọng số 10): phần tử cuối cùng chiếm và hình vuông của chúng ta có màu vàng. Bây giờ khi thêm

 div {màu nền: màu xanh;} div.maDiv {màu nền: màu đỏ;} .maDiv {màu nền: màu vàng;} 

Hình vuông chuyển sang màu đỏ. Tại sao?

• ".maDiv" - 10
• "div.maDiv" kết hợp một yếu tố và một lớp - 11!

Cảnh báo: đôi khi thêm một lớp vào quy tắc sẽ không đủ để tăng trọng số của tất cả các yếu tố có liên quan.

Lưu ý rằng

So sánh kết quả của mã này:

 div {màu nền: màu xanh;} div # maDiv {màu nền: màu đỏ;} 

Với kết quả của điều này:

 div {màu nền: màu xanh;} div #maDiv {màu nền: màu đỏ;} 

Trong trường hợp đầu tiên div của chúng tôi là màu đỏ, trong trường hợp thứ hai là màu xanh!

"Nhưng tại sao, phần tử + ID =, vì vậy nó phải luôn có màu đỏ!"

Lưu ý sự khác biệt tinh tế:

• div # maDiv : áp dụng cho div có ID "maDiv".
• div #maDiv : Áp dụng cho tất cả các thành phần có ID là "maDiv" có trong phần tử cha được gọi là "div".

Quảng trường của chúng tôi chỉ quan tâm đến quy tắc đầu tiên. Theo nguyên tắc chung, luôn chú ý đến cách bạn viết quy tắc của mình, sử dụng đúng dấu cách, dấu phẩy..v.v

Ví dụ:

• p .myClass a {} : cho tất cả các liên kết có trong bất kỳ phần tử nào có lớp là "myClass", tất cả được chứa trong bất kỳ

  thành phần. Trọng lượng: 12.

• p.myClass, a {} : cho tất cả các liên kết và tất cả

  có lớp là "myClass". Trọng lượng: 11 hoặc 1

• p, .myClass, a {} : cho tất cả các liên kết và tất cả các thành phần có lớp là "myClass" và tất cả

  thành phần. Trọng lượng: 1 đến 10 hoặc 1