Sử dụng bộ chọn lớp giả CSS, cụ thể là,. tích cực,. bay lượn,. liên kết và. đã truy cập, chúng tôi có thể định kiểu các trạng thái khác nhau của liên kết/neo. Để có chức năng phù hợp, thứ tự của các bộ chọn này phải là -
- liên kết
- đã đến thăm
- bay lượn
- tích cực
Cú pháp của thuộc tính lớp giả CSS như sau -
a:[pseudo-selector] {
/*declarations*/
}Ví dụ
Hãy xem một ví dụ để sử dụng Các lớp giả CSS Anchor –
Bản thử trực tiếp
Your favourite sports?
Football Go To Google Go To Bing
đầu ra
]
Chẳng hạn, đây là CSS sẽ làm cho các liên kết neo giảm xuống một pixel [tạo cảm giác như được đẩy trong không gian ba chiều] ở trạng thái hoạt động
Dự phòng nhúng CodePen
:active cũng có thể áp dụng cho bất kỳ phần tử nào. Trong Bút bên dưới, nhấp vào bất kỳ đâu trên trang sẽ làm cho toàn bộ trang có màu vàng
Dự phòng nhúng CodePen
Cách tốt nhất là bao gồm tất cả các “trạng thái”, đặc biệt đối với các liên kết. Một cách dễ dàng để làm điều đó là “LOVE HATE” hoặc
- L
:link - O
- V
:visited - E
- H
:hover - Một
:active - T
- E
Làm chúng theo thứ tự đó là lý tưởng
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}Mặt khác, giả sử nếu bạn liệt kê kiểu :visited cuối cùng, nếu liên kết đó được truy cập, nó sẽ ghi đè tuyên bố :active và :hover và liên kết sẽ luôn có màu tím bất kể bạn đang di chuột hay liên kết đang hoạt động [không lý tưởng]
Bộ chọn :link là một lớp giả nhắm mục tiêu tất cả các phần tử neo [CSS-Tricks
CSS-Tricks
CSS-Tricks