: target - Thủ thuật CSS | CSS Almanac 2025

Bộ :targetchọn giả trong CSS khớp khi băm trong URL và id của một phần tử giống nhau. Ví dụ: nếu URL hiện tại là:

https://css-tricks.com/#voters

Và điều này tồn tại trong HTML:

 Content

Bộ chọn này sẽ phù hợp với:

:target ( background: yellow; )

Và sectionphần tử đó sẽ có nền màu vàng.

Với công cụ chọn chung đó (khớp với bất kỳ thứ gì xảy ra là mục tiêu), nếu URL thay đổi thành kết thúc #faqvà có một phần tử khác có ID là faq, công cụ chọn đó sẽ khớp lại và #faqphần tử sẽ có nền màu vàng.

Bạn có thể giới hạn nó bằng cách nói cụ thể về những yếu tố bạn muốn nhắm mục tiêu, như

#voters:target ( )

Khi nào bạn sẽ sử dụng cái này?

Một khả năng là khi bạn muốn phong cách với “trạng thái”. Khi trang có một hàm băm nhất định, nó ở trạng thái đó. Nó không hoàn toàn linh hoạt như thao tác tên lớp (vì chỉ có thể có một và nó chỉ có thể liên quan đến một phần tử) nhưng nó tương tự. Bất cứ điều gì bạn có thể làm khi thay đổi một lớp để thay đổi trạng thái mà bạn có thể làm khi phần tử ở trong :target. Ví dụ: thay đổi màu sắc, thay đổi vị trí, thay đổi hình ảnh, ẩn / hiện mọi thứ, bất cứ điều gì.

Tôi sẽ sử dụng các quy tắc ngón tay cái này để biết khi nào :targetlà một lựa chọn tốt:

Khi cần một "trạng thái"
Khi hành vi nhảy xuống / liên kết băm được chấp nhận
Khi nào có thể chấp nhận được để ảnh hưởng đến lịch sử trình duyệt

Làm cách nào để bạn nhận được hàm băm trong URL?

Cách phổ biến nhất là người dùng nhấp vào liên kết có chứa hàm băm. Có thể là một liên kết nội bộ (cùng một trang) hoặc một URL đủ điều kiện sẽ kết thúc bằng một hàm băm và giá trị. Ví dụ:

Go To There Go To There

Hành vi nhảy

Bất kể đó có phải là liên kết cùng trang hay không, hành vi của trình duyệt là cuộn trang cho đến khi phần tử đó ở đầu trang . Hoặc, xa hết mức có thể nếu nó không thể cuộn đến mức đó. Điều này khá quan trọng cần biết, vì nó có nghĩa là việc khai thác hành vi “đã nêu” này là một chút khó khăn / hạn chế.

Ví dụ: tôi đã từng thử nhiều kỹ thuật khác nhau để sao chép các tab CSS chức năng, nhưng cuối cùng quyết định sử dụng kiểm tra hộp kiểm là một ý tưởng tốt hơn vì nó tránh được các vấn đề nhảy trang. Ian Hansson tại CSS Science cũng có một số ví dụ về các tab. Ví dụ thứ ba của anh ấy sử dụng :targetvà định vị tuyệt đối các phần tử ẩn phía trên đầu trang để ngăn hành vi nhảy trang. Nó thông minh, nhưng là một giải pháp tổng thể hoàn hảo, bởi vì điều đó có nghĩa là trang sẽ nhảy lên trên nếu các tab nằm sâu hơn trên một trang.

Thêm thông tin

Bài viết ở đây về CSS-Tricks: On: target
Bộ chọn Thông số cấp 4
Một thư viện hình ảnh đơn giản sử dụng: target (bị lỗi nhảy trang, ví dụ điển hình về điều đó) của Chris Heilmann
Bản trình diễn kỹ thuật phai màu vàng (mặc dù dành cho nội dung hiện có, không phải nội dung mới được thêm vào) từ Web Designer Notebook.
Mục tiêu CSS, theo nghĩa đen, của Caleb Ogden.
CSS: mục tiêu cho các thiết kế ngoài màn hình
Tài liệu MDN