การกำหนดสีลิงก์ด้วย CSS

CSS อนุญาตให้กำหนดสีลิงก์ได้ คุณสมบัติ color ใช้กำหนดสีข้อความในองค์ประกอบ

ลำดับ pseudo-selectors ที่ถูกต้อง: :link, :visited, :hover, :active (LVHA)

ไวยากรณ์ (Syntax)

Selector {
  color: /*value*/;
}

ตัวอย่างที่ 1: สีทั้ง 4 สถานะ + ::after

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo::after { content: " (visited) "; font-style: italic; }
    a:link { color: lime; }
    a:visited { color: green; }
    a:hover { color: orange; }
    a:active { color: gold; }
  </style>
</head>
<body>
  <h2>Demo Links</h2>
  <a id="demo" href="">This is demo text 1.</a>
  <hr>
  <p> <a href="#">This is demo text 2.</a> </p>
</body>
</html>

ผลลัพธ์

ปกติ:

Hover:

Active (คลิก):

ตัวอย่างที่ 2: ลิงก์ใน Div

<!DOCTYPE html>
<html>
<head>
  <style>
    div { margin: auto; font-size: 1.4em; background-color: lightseagreen; width: 100px; text-align: center; }
    a:link { color: rebeccapurple; }
  </style>
</head>
<body>
  <div> <a id="demo" href="">Demo link.</a> </div>
</body>
</html>

ผลลัพธ์

Default Link Colors (Browser Stylesheet)

หมายเหตุ: สีอาจเปลี่ยนใน Browser รุ่นใหม่ ควรกำหนดเองเพื่อความสอดคล้อง

Privacy & :visited Limitations

เพื่อป้องกันการ track ประวัติ Browser จำกัด CSS ที่ใช้กับ :visited ได้เฉพาะ:

• color, background-color, border-color, outline-color
• column-rule-color, text-decoration-color, text-emphasis-color
• ไม่ได้: getComputedStyle จะคืนค่า unvisited color เสมอ