Các Pseudo-class của Anchor (liên kết) trong CSS

Sử dụng các bộ chọn pseudo-class trong CSS là :active, :hover, :link và :visited, chúng ta có thể định dạng các trạng thái khác nhau của một liên kết (anchor). Để hoạt động chính xác, thứ tự của các bộ chọn này nên tuân theo quy tắc LVHA:

• :link - liên kết chưa được truy cập
• :visited - liên kết đã được truy cập
• :hover - khi di chuột qua
• :active - khi đang nhấn chuột

Cú pháp cơ bản:

a:(pseudo-selector) {
  /* declarations */
}

Ví dụ 1: Định dạng các trạng thái liên kết

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    display: flex;
    float: left;
  }
  a {
    margin: 20px;
    padding: 10px;
    border: 2px solid black;
    text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
    font-size: 1.1em;
  }
  a:link {
    text-decoration: none;
  }
  a:visited {
    color: blueviolet;
  }
  a:hover {
    color: orange;
    font-size: 150%;
    font-weight: bold;
    box-shadow: 0 0 5px 1px grey;
  }
  a:active {
    color: red;
    box-shadow: inset 0 0 15px red;
  }
</style>
</head>
<body>
  <div>
    <h2>Môn thể thao yêu thích?</h2>
    <a href="#">Bóng đá</a>
    <a href="">Cricket</a>
  </div>
</body>
</html>

Kết quả

Trạng thái ban đầu:

Khi di chuột qua liên kết đầu tiên:

Khi nhấn vào liên kết đầu tiên:

Ví dụ 2: Sử dụng class cho anchor

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
  div {
    color: #000;
    padding: 20px;
    background-image: linear-gradient(135deg, grey 0%, white 100%);
    text-align: center;
  }
  .anchor {
    color: #FF8A00;
  }
  .anchor:last-child {
    color: #03A9F4;
  }
  .anchor:visited {
    color: #FEDC11;
  }
  .anchor:hover {
    color: #C303C3;
  }
  .anchor:active {
    color: #4CAF50;
  }
</style>
<body>
  <div>
    <h1>Công cụ tìm kiếm</h1>
    <a class="anchor" href="https://www.google.com" target="_blank">Đi đến Google</a>
    <a class="anchor" href="https://www.bing.com" target="_blank">Đi đến Bing</a>
  </div>
</body>
</html>

Kết quả

Lưu ý: Pseudo-class :link chọn tất cả các liên kết chưa được truy cập, :visited chọn các liên kết đã truy cập, :hover kích hoạt khi người dùng di chuột qua, và :active kích hoạt tại اللحظة người dùng nhấn chuột.