CSS :active ประเภท pseudo-class

การกำหนดและการใช้งาน

CSS :active พลังว่างใช้เพื่อเลือกและตั้งรูปแบบสำหรับองค์ประกอบที่ผู้ใช้กำลังกด

:active พลังว่างที่ใช้บ่อยที่สุด <a> และ <button> องค์ประกอบเมื่อผู้ใช้กดลิงก์ ลิงก์จะถูกกระตุ้น; ปุ่มก็เช่นกัน。

คำแนะนำ：ใช้ :link ตั้งรูปแบบสำหรับลิงก์ที่ยังไม่เข้าชม :visited ตั้งรูปแบบสำหรับลิงก์ที่เคยเข้าชม :hover ตั้งรูปแบบสำหรับลิงก์ที่เห็นด้วยเมาส์

จำเป็นเรียบร้อยในการกำหนด CSS，:active ต้องจัดให้ :hoverต้องมีอยู่เสมอก่อนที่จะมีผลใช้ได้!

ตัวอย่าง

ตัวอย่าง 1

เลือกและตั้งรูปแบบสำหรับลิงก์ที่กด：

a:active {
  background-color: yellow;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

เลือกและตั้งรูปแบบสำหรับ <button> ที่กด：

button:active {
  background-color: pink;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เลือกและตั้งรูปแบบสำหรับ <p>、<h1> และ <a> ที่กด：

p:active, h1:active, a:active {
  background-color: yellow;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 4

เลือกและตั้งรูปแบบสำหรับลิงก์ที่ยังไม่เข้าชม、เคยเข้าชม、เห็นด้วยเมาส์ และที่กด：

/* ลิงก์ที่ยังไม่เข้าชม */
a:link {
  color: green;
}
/* ลิงก์ที่เคยเข้าชม */
a:visited {
  color: green;
}
/* ลิงก์ที่เห็นด้วยเมาส์ */
a:hover {
  color: red;
}
/* ลิงก์ที่กด */
a:active {
  color: yellow;
}

ทดลองด้วยตัวเอง

ตัวอย่าง 5

ตั้งรูปแบบต่างกันสำหรับลิงก์：

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

ทดลองด้วยตัวเอง

CSS สัญลักษณ์

:active {
  css declarations;
}

รายละเอียดเทคนิค

การสนับสนุนบราวเซอร์

ตัวเลขในตารางชี้ถึงเวอร์ชันบราวเซอร์แรกที่สนับสนุนพลังว่างนี้อย่างเต็มที่。

หน้าที่เกี่ยวข้อง

ตัวแทนศัพท์：CSS ลิงก์

ตัวแทนศัพท์：CSS ปุ่ม

ตัวแทนศัพท์：CSS พลังว่าง