Ngữ pháp nâng cao CSS

Nhóm selector

Bạn có thể nhóm các selector, như vậy, các selector trong nhóm có thể chia sẻ cùng các宣言. Dùng dấu phẩy để tách các selector cần nhóm. Trong ví dụ sau, chúng ta đã nhóm tất cả các phần tử tiêu đề. Tất cả các phần tử tiêu đề đều là màu xanh.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Kế thừa và các vấn đề liên quan

Theo CSS, các phần tử con sẽ kế thừa thuộc tính từ phần tử cha. Nhưng nó không luôn hoạt động theo cách này. Xem quy tắc sau:

body {
     font-family: Verdana, sans-serif;
     }

Theo quy tắc trên, phần tử body của trang web sẽ sử dụng phông chữ Verdana (nếu hệ thống của người truy cập có phông chữ này).

Thông qua kế thừa CSS, các phần tử con sẽ kế thừa các thuộc tính của phần tử cấp cao nhất (trong ví dụ này là body) mà chúng có (các phần tử con như p, td, ul, ol, ul, li, dl, dt và dd). Không cần thêm quy tắc, tất cả các phần tử con của body nên hiển thị phông chữ Verdana, và các phần tử con của các phần tử con cũng vậy. Và thực tế, điều này cũng đúng trong hầu hết các trình duyệt hiện đại.

Nhưng trong thời kỳ chiến tranh trình duyệt máu me, tình hình này không nhất thiết xảy ra, lúc đó việc hỗ trợ tiêu chuẩn không phải là lựa chọn ưu tiên của doanh nghiệp. Ví dụ, Netscape 4 không hỗ trợ kế thừa, nó không chỉ bỏ qua kế thừa mà còn bỏ qua các quy tắc áp dụng cho phần tử body. IE/Windows cho đến IE6 vẫn còn vấn đề liên quan, phong cách chữ trong bảng sẽ bị bỏ qua. Vậy chúng ta phải làm gì?

Thân thiện với Netscape 4

May mắn là bạn có thể xử lý vấn đề trình duyệt cũ không hiểu kế thừa bằng quy tắc dư thừa mà chúng tôi gọi là "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Browsẻr 4.0 không thể hiểu kế thừa, nhưng họ có thể hiểu nhóm chọn lựa. Làm như vậy có thể lãng phí một phần băng thông của người dùng, nhưng nếu cần hỗ trợ người dùng Netscape 4, bạn không thể không làm như vậy.

Kế thừa có phải là một phép thuật không?

Nếu bạn không muốn font "Verdana, sans-serif" được kế thừa bởi tất cả các phần tử con, bạn nên làm thế nào? Ví dụ, bạn muốn font của đoạn văn là Times. Không có vấn đề. Tạo một quy tắc đặc biệt cho p, nó sẽ rời khỏi quy tắc của phần tử cha:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }