CSS :ตัวเลือก ที่ใช้งาน
ตัวอย่าง
เลือกและจัดรูปแบบลิงก์ที่ใช้งานอยู่:
a:active
{
background-color: yellow;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ตัว:active
เลือกใช้เพื่อเลือกและจัดรูปแบบลิงก์ที่ใช้งานอยู่
ลิงก์จะใช้งานได้เมื่อคุณคลิก
เคล็ดลับ:ตัวเลือก :active สามารถใช้ได้กับทุกองค์ประกอบ ไม่ใช่แค่ลิงก์เท่านั้น
เคล็ดลับ:ใช้ ตัวเลือก :linkเพื่อกำหนดสไตล์ลิงก์ไปยังหน้าที่ไม่ได้เยี่ยมชม :visited selector เพื่อจัดรูปแบบลิงก์ไปยังหน้าที่เยี่ยมชม และ :hoverตัวเลือกเพื่อกำหนดสไตล์ลิงก์เมื่อคุณวางเมาส์เหนือพวกมัน
หมายเหตุ: :active MUST come after :hover (ถ้ามี) ในคำจำกัดความ CSS เพื่อให้มีผล!
รุ่น: | CSS1 |
---|
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนตัวเลือกอย่างสมบูรณ์
Selector | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
ไวยากรณ์ CSS
:active {
css declarations;
}
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เลือกและจัดรูปแบบองค์ประกอบ <p>, <h1> และ <a> เมื่อคุณคลิก:
p:active, h1:active, a:active {
background-color: yellow;
}
ตัวอย่าง
เลือกและจัดรูปแบบลิงก์ที่ไม่ได้เยี่ยมชม เข้าชมแล้ว โฮเวอร์ และลิงก์ที่ใช้งานอยู่:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
ตัวอย่าง
ลิงค์สไตล์ที่มีสไตล์ต่างกัน:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: ลิงก์ CSS
กวดวิชา CSS: คลาสหลอก CSS