Bộ chọn neo CSS

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 Cricket

đầu ra

Đầu ra ban đầu -

Bộ chọn neo CSS

Khi di chuột vào liên kết đầu tiên, chúng tôi nhận được đầu ra sau

Bộ chọn neo CSS

Trong khi nhấp vào liên kết đầu tiên, đầu ra sau được trả về -

Bộ chọn neo CSS

Hãy xem một ví dụ khác về CSS Anchor Pseudo Class -

Ví dụ

Bản thử trực tiếp



CSS Anchor Pseudo Classes



Search Engines Go To Google Go To Bing

đầu ra

Bộ chọn neo CSS

Bộ chọn neo CSS


Bộ chọn neo CSS

Bộ chọn giả :active thay đổi hình thức của một liên kết trong khi nó đang được kích hoạt (được nhấp vào hoặc được kích hoạt theo cách khác). Nó thường chỉ được nhìn thấy trong tích tắc và cung cấp phản hồi trực quan rằng phần tử đó thực sự đã được nhấp vào. Nó thường được sử dụng trên các liên kết neo ()

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: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 () trên một trang có thuộc tính href

a:link {
  color: aquamarine;
}

Ví dụ trên sẽ thay đổi màu của tất cả các liên kết thành aquamarine

Khi được sử dụng kết hợp với lớp giả :hover, :link phải xuất hiện trước, nếu không thì hoàn toàn không được xác định, để các kiểu :hover hoạt động. Điều này là do chúng cụ thể như nhau, vì vậy nếu :link xuất hiện sau, các kiểu đó sẽ ghi đè lên các kiểu di chuột. Hãy suy nghĩ YÊU và GHÉT để có được thứ tự đúng

Lớp giả :link sẽ nhắm mục tiêu tất cả các phần tử có thuộc tính href, ngay cả khi ____27_______ có giá trị trống. Vì vậy, theo nghĩa đó, nó giống như bộ chọn thuộc tính


CSS-Tricks


CSS-Tricks


CSS-Tricks
7

Dưới đây là một số ví dụ để xem những gì sẽ phù hợp với lớp giả :link


CSS-Tricks


CSS-Tricks


CSS-Tricks

Chỉ có ba phần tử HTML chấp nhận thuộc tính href. ,

CSS-Tricks
1 và
CSS-Tricks
2. Chỉ phần tử
mới có thể được tạo kiểu thông qua lớp giả :link. Ngoài ra, bạn không thể thêm thuộc tính href vào một loại phần tử khác và làm cho nó có thể tạo kiểu thông qua :link. Nói cách khác, nếu bạn có HTML sau

CSS-Tricks

CSS sau đây sẽ không có hiệu lực

div:link {
  color: aquamarine;
}

Một lần nữa, HTML sẽ không xác thực được, vì href không phải là thuộc tính hợp lệ cho

CSS-Tricks
8

Do thực tế là :link chỉ có thể nhắm mục tiêu các phần tử , các kiểu :link có thể được xác định trong CSS mà không cần bộ chọn loại phần tử, như thế này

:link {
  color: aquamarine;
}

Ngoài ra, đối với tất cả các mục đích thực tế khi sử dụng HTML, lớp giả :link hơi không liên quan vì có thể đạt được hiệu quả tương tự bằng cách nhắm mục tiêu trực tiếp vào tất cả các phần tử

a {
  color: aquamarine;
}

Tuy nhiên, nếu có bất kỳ phần tử nào trên trang không có bộ thuộc tính href (ví dụ: trên các trang cũ đã sử dụng

div:link {
  color: aquamarine;
}
6), đoạn mã trên cũng sẽ nhắm mục tiêu các phần tử đó và đây có thể không phải là kết quả mong muốn

Cũng cần chỉ ra rằng, bắt đầu với CSS2, các ngôn ngữ tài liệu khác (ngoài HTML) có thể xác định các thành phần khác, ngoài các ký tự neo, có thể được tạo kiểu thông qua lớp giả :link

5 loại bộ chọn CSS là gì?

Có nhiều loại bộ chọn cơ bản khác nhau. .
Bộ chọn phần tử
bộ chọn id
Bộ chọn lớp
Bộ chọn chung
Bộ chọn nhóm
Bộ chọn thuộc tính
Bộ chọn lớp giả
Bộ chọn phần tử giả

Bạn có thể nhắm mục tiêu a href bằng CSS không?

Bộ chọn CSS href là gì?

Trong CSS, bộ chọn là các mẫu được sử dụng để chọn (các) phần tử bạn muốn tạo kiểu. . Bộ chọn CSS