คลาสหลอก คือการแสดงสถานะที่แตกต่างกันขององค์ประกอบหรือตัวเลือก css คลาสหลอกที่เยี่ยมชมคือการแสดงว่าลิงก์นั้นเข้าชมแล้ว
คลาสหลอกนี้ส่วนใหญ่เชื่อมโยงกับลิงก์
ไวยากรณ์
a:visited { color:green;} มาดูการใช้งานจริงของ :visited pseudo class ด้วยสถานการณ์ต่างๆ ดังนี้ -
ตัวอย่าง
<html>
<head>
<style>
a:visited { color:green;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html> คำอธิบาย
เมื่อคุณเห็นลิงก์ครั้งแรก ลิงก์จะแสดงด้วยสีลิงก์ปกติ (สีน้ำเงิน) และลิงก์จะเปลี่ยนเป็นสีเขียว หากเคยเข้าชมลิงก์นี้ 1 ครั้ง
ตัวอย่าง
<html>
<head>
<style>
/* setting default style to make the style visible for :visited state */
a { background-color: white; border:1px solid white;}
a:visited {border:yellow;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html> คำอธิบาย
ในตัวอย่างนี้เมื่อเข้าชมลิงก์แล้ว ลิงก์จะมีเส้นขอบสีเหลือง 1px
ตัวอย่าง
<html>
<head>
<style>
/* setting default style to make the style visible for :visited state */
a { background-color: white; }
a:visited { background-color: seagreen;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com">Click here to learn</a>
</body>
</html> คำอธิบาย
เมื่อคุณไปที่ลิงก์หนึ่งครั้ง มันจะเปลี่ยนสีพื้นหลังเป็นสีเขียวทะเล
ข้อจำกัดด้านสไตล์
เพื่อความเป็นส่วนตัวและความปลอดภัยคลาสหลอกที่เยี่ยมชมสามารถทำงานกับชุดคุณสมบัติ css ที่จำกัด เช่น สี สีพื้นหลัง สีขอบ สีขอบล่าง สีขอบซ้าย สีขอบขวา สีขอบบน แอตทริบิวต์ color, column-rule-color, outline-color และ SVG เป็นสีเติมและเส้นขีด
ความเข้ากันได้ของเบราว์เซอร์
| Chrome | Firefox | ขอบ | IE | ซาฟารี | โอเปร่า |
| 1 | 1 | ใช่ | ใช่ | 1 | 3.5 |
