ID - Thủ thuật CSS | CSS Almanac 2025

Bộ #idchọn cho phép bạn nhắm mục tiêu một phần tử bằng cách tham chiếu idthuộc tính HTML. Tương tự như cách các thuộc tính lớp được biểu thị trong CSS bằng .“dấu chấm” ( #) trước tên lớp, các thuộc tính ID được đặt tiền tố bằng “octothorpe” ( ), thường được gọi là “dấu thăng” hoặc “dấu thăng”.

#header ( /* this is the ID selector */ background: #eee; )

Giá trị thuộc tính ID phải là duy nhất. HTML có hai hoặc nhiều hơn các chữ cái giống nhau idkhông xác thực và sẽ tạo ra các kết quả không thể đoán trước. Nếu có hai trong số giống nhau, CSS sẽ vẫn khớp và tạo kiểu cho cả hai. Tuy nhiên, JavaScript khi truy vấn ID, sẽ tìm ID đầu tiên và dừng lại.

Bộ chọn ID cực kỳ mạnh mẽ. Chúng có độ đặc hiệu rất cao, thường được viết là (0, 1, 0, 0). Kiểu áp dụng với chúng sẽ ghi đè các bộ chọn khác chỉ sử dụng thẻ hoặc lớp. Để lam sang tỏ:

Kiểm tra cây bút này!

Một đoạn có cả thuộc tính ID và class đang được cung cấp mâu thuẫn với các quy tắc CSS; mặc dù bộ chọn lớp ( .reusable) nằm bên dưới bộ chọn ID ( #unique) trong CSS (nó thường ghi đè các kiểu bên trên nó trong “thác”), đoạn văn vẫn có màu đỏ vì #uniquelấn át màu xanh lam đang được đặt .reusable. Một số lượng vô hạn các lớp không bao giờ có thể đánh bại tính cụ thể của ID (mặc dù có một lỗi tại một thời điểm mà 256 lớp sẽ đánh bại một ID).

Tính cụ thể và tính độc đáo cao có nghĩa là sử dụng #idlà một “tùy chọn hạt nhân” của CSS: quá mạnh, không linh hoạt và hiệu quả không cân xứng. Tránh #idbộ chọn trong CSS được coi là một phương pháp hay nhất: tốt nhất là sử dụng một lớp trong hầu hết mọi trường hợp.

Điều đó đang được nói, các thuộc tính ID có một số giá trị sử dụng bên ngoài CSS:

Cung cấp các hook độc đáo cho JavaScript
Các phần tử có idthuộc tính có thể được nhắm mục tiêu bằng thẻ liên kết, bằng cách đặt hrefthuộc tính thành idgiá trị, có tiền tố là #ký hiệu. Việc nhấp vào liên kết cố định đó sẽ tập trung lại trang hiện tại vào phần tử có kết hợp id. Đây được gọi là “mã nhận dạng phân đoạn”.
Đối với các phần tử thực sự độc đáo trong HTML của bạn, chẳng hạn như phần tử biểu mẫu, ID có thể hữu ích cho những thứ như liên kết labelcác s và inputs.

Điểm quan tâm

Mã hợp lệ #idkhông được bắt đầu bằng một số và phải dài ít nhất một ký tự. Một phần lớn của Unicode là các ký tự hợp lệ trong dấu id.
id thuộc tính và bộ chọn phân biệt chữ hoa chữ thường và phải khớp chính xác trên HTML, CSS và JavaScript