Giải thích chi tiết chọn lựa chọn id CSS

Bộ lọc ID cho phép chỉ định樣式 một cách độc lập với yếu tố tài liệu.

Bộ lọc ID CSS

Trong một số khía cạnh, bộ lọc ID tương tự như bộ lọc lớp, nhưng cũng có một số sự khác biệt quan trọng.

Ngữ pháp

Trước tiên, bộ lọc ID có trước một dấu # - cũng được gọi là dấu bàn cờ hoặc dấu #.

Xin xem quy tắc sau:

*#intro {công thức:đậm;}

Giống như bộ lọc lớp, bộ lọc ID có thể bỏ qua bộ lọc dấu hỏi. Ví dụ trước cũng có thể viết như sau:

#intro {font-weight:bold;}

Hiệu ứng của bộ lọc này sẽ là như nhau.

Khác biệt thứ hai là bộ lọc ID không tham chiếu đến giá trị của thuộc tính class, mà không có nghi ngờ gì cả, nó tham chiếu đến giá trị của thuộc tính id.

Dưới đây là một ví dụ thực tế về bộ lọc ID:

<p id="intro">This is a paragraph of introduction.</p>

Hãy thử ngay

Bộ lọc lớp hay bộ lọc ID?

Trong chương về bộ lọc lớp, chúng ta đã giải thích rằng có thể gán lớp cho nhiều yếu tố. Trong chương trước, tên lớp important đã được áp dụng cho các yếu tố p và h1, và nó có thể được áp dụng cho nhiều yếu tố khác.

Khác biệt 1: Chỉ có thể sử dụng một lần trong tài liệu

Khác với lớp, trong một tài liệu HTML, bộ lọc ID chỉ được sử dụng một lần và chỉ một lần.

Khác biệt 2: Không thể sử dụng danh sách từ ID

Khác với bộ lọc lớp, bộ lọc ID không thể được sử dụng cùng nhau vì thuộc tính ID không cho phép có danh sách từ cách nhau bằng khoảng trống.

Khác biệt 3: ID có thể chứa nhiều ý nghĩa hơn

Giống như lớp, ID có thể được chọn một cách độc lập với yếu tố. Một số trường hợp, bạn biết rằng trong tài liệu sẽ xuất hiện một giá trị ID cụ thể nhưng không biết nó sẽ xuất hiện trên yếu tố nào, vì vậy bạn muốn tuyên bố bộ lọc ID độc lập. Ví dụ, bạn có thể biết rằng trong một tài liệu cụ thể sẽ có một yếu tố có giá trị ID là mostImportant. Bạn không biết điều này là một đoạn văn, một cụm từ, một mục liệt kê hay một tiêu đề mục. Bạn chỉ biết rằng mỗi tài liệu sẽ có một nội dung quan trọng như vậy, nó có thể xuất hiện trong bất kỳ yếu tố nào và chỉ có thể xuất hiện một lần. Trong trường hợp này, bạn có thể viết như sau:

#mostImportant {màu:red; nền:yellow;}

Quy tắc này sẽ khớp với các yếu tố sau (các yếu tố này không thể xuất hiện cùng một lúc trong cùng một tài liệu vì chúng có cùng giá trị ID):

<h1 id="mostImportant"This is important!
<em id="mostImportant"This is important!
<ul id="mostImportant">This is important!</ul>

Thử ngay:

Phân biệt chữ hoa và chữ thường

Lưu ý rằng bộ lọc lớp và ID có thể phân biệt được chữ hoa và chữ thường. Điều này phụ thuộc vào ngôn ngữ của tài liệu. HTML và XHTML định nghĩa giá trị lớp và ID là phân biệt được chữ hoa và chữ thường, vì vậy giá trị lớp và ID phải phù hợp với giá trị tương ứng trong tài liệu.

Do đó, cho CSS và HTML dưới đây, phần tử sẽ không trở thành đậm:

#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>

Do kích thước chữ i có thể khác nhau về chữ hoa và chữ thường, nên bộ lọc sẽ không khớp với các phần tử trên.