CSS แนะนำแนวคิดของคลาสหลอกและองค์ประกอบหลอกเพื่อจัดรูปแบบข้อมูลนอกเหนือจากแผนผังเอกสาร กล่าวอีกนัยหนึ่ง pseudo-class และ pseudo-element ใช้เพื่อแก้ไขส่วนที่ไม่ได้อยู่ในแผนผังเอกสาร เช่น ตัวอักษรตัวแรกในประโยค หรือองค์ประกอบแรกในรายการ หรือเมื่อเมาส์วางเมาส์เหนือสิ่งใดสิ่งหนึ่ง สไตล์ที่จะตั้งค่าเมื่อไฮเปอร์ลิงก์เปิดอยู่
องค์ประกอบหลอกคืออะไร?
องค์ประกอบหลอก: ใช้เพื่อสร้างองค์ประกอบบางอย่างที่ไม่ได้อยู่ในแผนผังเอกสารและเพิ่มสไตล์ให้กับองค์ประกอบเหล่านั้น ในความเป็นจริง องค์ประกอบเสมือนเป็นสิ่งที่ผู้เลือกทั่วไปไม่สามารถทำได้ก่อนหรือหลังองค์ประกอบบางอย่าง เนื้อหาของการควบคุมเหมือนกับองค์ประกอบ แต่ตัวมันเองนั้นเป็นนามธรรมตามองค์ประกอบและไม่มีอยู่ในโครงสร้างเอกสาร ตัวอย่างเช่น เราสามารถใช้ :before เพื่อเพิ่มข้อความด้านหน้าองค์ประกอบ และเพิ่มสไตล์ให้กับข้อความนี้
ลักษณะองค์ประกอบ
1. ข้อดี:
(1) อย่าครอบครองโหนด DOM และลดจำนวนโหนด DOM
(2) ให้ CSS ช่วยแก้ปัญหา JavaScript และทำให้การพัฒนาง่ายขึ้น
(3) หลีกเลี่ยงการเพิ่มองค์ประกอบของหน้าที่ไม่มีความหมาย
2. ข้อเสีย:
(1) ไม่เอื้อต่อการดีบัก
(2) องค์ประกอบหลอกไม่ได้สะท้อนให้เห็นจริงๆ ในเนื้อหาเอกสาร แต่จะสะท้อนให้เห็นในเอฟเฟกต์ภาพเท่านั้น ดังนั้นคุณจึงไม่สามารถเพิ่มเนื้อหาที่เป็นประโยชน์ให้กับองค์ประกอบหลอกได้ และเนื้อหาส่วนนี้จะไม่ถูกรวบรวมข้อมูลโดยเครื่องมือค้นหา
CSS มีชุดขององค์ประกอบหลอก ดังแสดงในตารางต่อไปนี้:
1. ::หลัง
องค์ประกอบหลอก::after สามารถแทรกเนื้อหาบางส่วนหลังองค์ประกอบที่ระบุ ใน ::after คุณต้องใช้แอตทริบิวต์เนื้อหาเพื่อกำหนดเนื้อหาที่จะต่อท้าย และใน ::after คุณต้องกำหนดแอตทริบิวต์เนื้อหาเพื่อให้มีผล (ไม่จำเป็นต้องแทรกเนื้อหา) ค่าของแอตทริบิวต์เนื้อหาสามารถกำหนดเป็นค่าว่างได้)
2. ::ก่อน
องค์ประกอบหลอก::before สามารถแทรกเนื้อหาบางส่วนก่อนองค์ประกอบที่ระบุ เช่นเดียวกับ ::after แอตทริบิวต์เนื้อหาจะต้องใช้ใน ::ก่อนที่จะกำหนดเนื้อหาที่จะต่อท้าย และแอตทริบิวต์เนื้อหาจะต้องถูกกำหนดใน ::ก่อนที่จะมีผล (เมื่อไม่มีเนื้อหาที่จะแทรก ค่าของแอตทริบิวต์เนื้อหาสามารถกำหนดเป็นโมฆะได้)
3. ::อักษรตัวแรก
องค์ประกอบหลอก::อักษรตัวแรกใช้เพื่อกำหนดลักษณะของอักขระตัวแรกของเนื้อหาในองค์ประกอบที่ระบุ โดยปกติจะใช้กับขนาดตัวอักษรและแอตทริบิวต์ลอยตัวเพื่อสร้างเอฟเฟกต์หมวกแบบหล่น ควรสังเกตว่าองค์ประกอบหลอก ::ตัวอักษรตัวแรกสามารถใช้ได้เฉพาะกับองค์ประกอบระดับบล็อกเท่านั้น หากองค์ประกอบแบบอินไลน์ต้องการใช้องค์ประกอบหลอกนี้ จะต้องแปลงองค์ประกอบเหล่านั้นเป็นองค์ประกอบระดับบล็อกก่อน
4. ::บรรทัดแรก
องค์ประกอบหลอก::บรรทัดแรกใช้เพื่อกำหนดรูปแบบของบรรทัดแรกของเนื้อหาในองค์ประกอบที่ระบุ คล้ายกับ ::อักษรตัวแรก องค์ประกอบหลอก::บรรทัดแรกสามารถใช้ได้เฉพาะกับองค์ประกอบระดับบล็อกเท่านั้น องค์ประกอบอินไลน์ต้องการใช้องค์ประกอบหลอกนี้ คุณต้องแปลงเป็นองค์ประกอบระดับบล็อกก่อน
5. ::การคัดเลือก
Pseudo element::selection ใช้เพื่อกำหนดสไตล์เมื่อเลือกวัตถุ ควรสังเกตว่า pseudo element::selection สามารถกำหนดสี พื้นหลัง เคอร์เซอร์ โครงร่าง และเงาข้อความได้เมื่อเลือกองค์ประกอบเท่านั้น (IE11 ยังไม่รองรับ กำหนดคุณลักษณะนี้) และคุณลักษณะอื่นๆ
6. ::ตัวยึดตำแหน่ง
องค์ประกอบหลอก::placeholder ใช้เพื่อตั้งค่าข้อความตัวยึด (ข้อความที่ตั้งค่าผ่านแอตทริบิวต์ตัวยึดของ HTML) ขององค์ประกอบรูปแบบ (<input>, <textarea> องค์ประกอบ)