เนื่องจากสถานะเปลี่ยนแปลงแบบไดนามิก เมื่อองค์ประกอบถึงสถานะใดสถานะหนึ่ง องค์ประกอบนั้นอาจได้รับรูปแบบคลาสหลอก เมื่อสถานะเปลี่ยนแปลง องค์ประกอบนั้นจะสูญเสียสไตล์นี้ไป จากสิ่งนี้จะเห็นได้ว่าฟังก์ชันของมันค่อนข้างคล้ายกับคลาส แต่ขึ้นอยู่กับนามธรรมนอกเอกสาร ดังนั้นจึงเรียกว่าคลาสหลอก
CSS pseudo-class เป็นคลาสพิเศษที่ทำงานบนตัวเลือก CSS เพื่อสร้างเอฟเฟกต์เฉพาะให้กับแท็กหรือองค์ประกอบที่เลือก
ไวยากรณ์ของ CSS หลอกคลาสคือ: ตัวเลือก: ชื่อคลาสหลอก {แอตทริบิวต์: ค่าแอตทริบิวต์}
คลาสหลอกที่ใช้กันมากที่สุดคือคลาสหลอกของไฮเปอร์ลิงก์ ก ลิงก์เป็นส่วนสำคัญของเว็บไซต์ คุณสามารถดูลิงก์จำนวนมากได้ในเกือบทุกหน้าเว็บ . จุด. ลิงก์มีสถานะที่แตกต่างกันสี่สถานะ ได้แก่ ลิงก์ เยี่ยมชม ใช้งานอยู่ และโฮเวอร์ คุณสามารถตั้งค่าสไตล์ที่แตกต่างกันสำหรับสถานะทั้งสี่ของลิงก์ได้โดยใช้ตัวเลือกคลาสหลอกต่อไปนี้:
:link: กำหนดรูปแบบของลิงก์ที่ยังไม่ได้เยี่ยมชม
:visited: กำหนดรูปแบบของลิงก์ที่เยี่ยมชม
:hover: กำหนดสไตล์เมื่อเมาส์ผ่านหรือวางเมาส์เหนือลิงก์
:active: กำหนดสไตล์เมื่อมีการคลิกลิงก์
ตัวอย่าง:
<html><head></head><body><a>ไม่มีแท็ก href แบบอักษรไม่ได้รับการแก้ไข และไม่มีการตอบสนองเมื่อวางเมาส์ไว้</a></br>< ahref=#target=_blank>href คือแท็กของ # ที่เป็นสีน้ำเงินตามค่าเริ่มต้นและขีดเส้นใต้ เมื่อคุณวางเมาส์ไว้ แท็กจะกลายเป็นรูปมือ</a></br><ahref=https://www .dotcpp.com/target=_blank>href คือแท็กของ URL ให้เอฟเฟกต์เหมือนกับด้านบน</a></body></html>
ผลการวิ่ง:
(1):ลิงค์
คำอธิบาย: ตั้งค่าคุณสมบัติสไตล์ชีตของออบเจ็กต์ก่อนที่จะเข้าถึง
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>a{text- decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;พื้นหลัง:#ccc ;color:black;}</style></head><body><ahref=''>ลิงก์แรก</a><ahref=''>ลิงก์ที่สอง</a></body>< /html>ผลการวิ่ง:
(2): เยี่ยมชมแล้ว
คำอธิบาย: ตั้งค่าแอตทริบิวต์สไตล์ชีตของออบเจ็กต์ที่ล้าสมัยเมื่อมีการเข้าถึงที่อยู่ลิงก์
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>a{text- decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;พื้นหลัง:#ccc ;color:black;}a:visited{พื้นหลัง:#FFFF99;border:1pxsoildred;color:red;}</style></head><body><ahref=''>ลิงก์แรก</a>< ahref= ''>ลิงก์ที่สอง</a></body></html>ผลการวิ่ง:
(3):โฮเวอร์
คำอธิบาย: ตั้งค่าคุณสมบัติสไตล์ชีทของออบเจ็กต์เมื่อวางเมาส์ไว้เหนือ
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>a{text- decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;พื้นหลัง:#ccc ;color:black;}a:visited{พื้นหลัง:#FFFF99;border:1pxsolidred;color:red;}a:hover{พื้นหลัง:#9c6ae1;border:1pxsolidblack;color:black;}</style></head> <body><ahref=''>ลิงก์แรก</a><ahref=''>ลิงก์ที่สอง</a></body></html>ผลการวิ่ง:
(4): ใช้งานอยู่
คำอธิบาย: ตั้งค่าคุณสมบัติสไตล์ชีตของออบเจ็กต์เมื่อผู้ใช้เปิดใช้งาน (เหตุการณ์ที่เกิดขึ้นระหว่างการคลิกเมาส์และปล่อย)
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>a{text- decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;พื้นหลัง:#ccc ;color:black;}a:เยี่ยมชมแล้ว{พื้นหลัง:#FFFF99;border:1pxsolidred;color:red;}a:hover{พื้นหลัง:#9c6ae1;border:1pxsolidblack;color:black;}a:active{พื้นหลัง:#000 ;border:1pxsolidblack;color:white;}</style></head><body><ahref=''>ลิงก์แรก</a><ahref=''>ลิงก์ที่สอง</a>< /body>< /html>ผลการวิ่ง:
ลำดับที่แตกต่างกันเมื่อกำหนด CSS จะนำไปสู่เอฟเฟกต์การแสดงลิงค์ที่แตกต่างกันโดยตรง สาเหตุอาจเป็น "หลักการใกล้เคียง" ที่เบราว์เซอร์ปฏิบัติตามเมื่อตีความ CSS ลำดับที่ถูกต้อง: a:link, a:visited, a:hover, a:active