Làm thế nào để Ghi đè các Kiểu CSS3 - núm vú

Với phong cách CSS thừa kế có khả năng ghi đè quy tắc kiểu di truyền. Ví dụ, hãy xem đoạn mã sau đây để biết ý nghĩa của điều này có nghĩa là gì:

overRide. html body {color: red;} p {color: green;}. myClass {color: blue;} #whatColor {color: purple;} Div này chỉ có phong cách từ cơ thể.
Đây là một đoạn thường với kiểu chữ






Đoạn này là thành viên của một lớp học
Đoạn này là một thành viên của một lớp và có một ID, cả hai đều có các quy tắc kiểu dáng.

Câu hỏi đặt ra là: màu sắc sẽ hiển thị phần tử whatColor nào? Nó là một thành viên của cơ thể, nên nó nên màu đỏ. Nó cũng là một đoạn, và các đoạn văn có màu xanh lá cây. Nó cũng là một thành viên của lớp myClass, vì vậy nó phải là màu xanh lam. Cuối cùng, nó được đặt tên whatColor, và các phần tử có ID này phải là màu tím.

Bốn quy tắc màu sắc dường như mâu thuẫn đều bị bỏ đi đối với yếu tố nghèo nàn này. Màu gì sẽ là màu gì?

CSS có một hệ thống xếp hạng rõ ràng để xử lý loại tình huống này. Nhìn chung, các quy tắc cụ thể hơn nhiều quy tắc chung hơn. Đây là ưu tiên (từ cao nhất đến thấp nhất):

1. User preference

   Người dùng luôn có sự lựa chọn cuối cùng về phong cách được sử dụng. Người dùng không bắt buộc phải sử dụng bất kỳ kiểu dáng nào và luôn luôn có thể thay đổi biểu định kiểu cho bản sao của trang địa phương. Nếu người dùng cần áp dụng một phong cách đặc biệt (ví dụ như độ tương phản cao đối với người khiếm thị), anh ta nên luôn luôn có tùy chọn đó.

2. Phong cách địa phương

   Một phong cách địa phương (được định nghĩa bằng thuộc tính kiểu trong HTML) có mức độ ưu tiên cao nhất của kiểu được nhà phát triển xác định. Nó overrules bất kỳ phong cách khác.

3. id

   Một phong cách gắn liền với id phần tử có trọng lượng lớn vì nó ghi đè bất kỳ kiểu nào khác được định nghĩa trong bảng kiểu.

4. Lớp

   Các kiểu được gắn với lớp ghi đè lên kiểu của phần tử của đối tượng. Vì vậy, nếu bạn có một đoạn văn với một màu xanh lục thuộc về một lớp màu xanh lam, phần tử sẽ là màu xanh vì các kiểu lớp vượt trội hơn các kiểu phần tử.

5. Phần tử

   Kiểu nguyên tố được ưu tiên hơn bất kỳ container nào của nó. Ví dụ: nếu một đoạn văn nằm trong một div, kiểu văn bản có thể ghi đè lên cả div và phần thân.

6. Phần tử

   vùng chứa, bảng, danh sách và các phần tử khác được sử dụng làm thùng chứa vượt qua kiểu của chúng. Nếu một phần tử nằm trong một hoặc nhiều thùng chứa, nó có thể kế thừa các thuộc tính kiểu dáng từ chúng.

7. Body

   Bất cứ thứ gì được định nghĩa theo kiểu cơ thể là mặc định trang tổng thể, nhưng nó sẽ bị ghi đè bởi bất kỳ kiểu dáng khác.

Trong chế độ OverRide. ví dụ html, quy tắc id được ưu tiên, vì vậy đoạn hiển thị bằng màu tím.