ทั้งองค์ประกอบหลอกและคลาสหลอกถูกกำหนดโดยการต่อท้ายคำหลักเฉพาะหลังตัวเลือก ตามกฎไวยากรณ์ที่คล้ายกัน และการตั้งค่าสไตล์ที่สอดคล้องกันในบล็อกกฎ CSS องค์ประกอบหลอกสามารถเพิ่มหรือแทนที่เนื้อหาผ่านแอตทริบิวต์เนื้อหา ตัวอย่างเช่น :before และ :after สามารถแทรกข้อความ รูปภาพ หรือเนื้อหาอื่นๆ ที่สร้างขึ้นได้ คลาสเทียมมีผลกับสไตล์ขององค์ประกอบเท่านั้น แต่จะไม่เพิ่มหรือแก้ไขเนื้อหา โดยจะเปลี่ยนพฤติกรรมขององค์ประกอบตามการโต้ตอบของผู้ใช้ โครงสร้างเอกสาร หรือเงื่อนไขเชิงตรรกะอื่นๆ ความแตกต่างที่สำคัญมีดังนี้:
วัตถุเป้าหมาย :
ตัวเลือกคลาสหลอก (คลาสหลอก) ทำงานกับองค์ประกอบที่มีอยู่จริง และใช้เพื่ออธิบายสถานะเฉพาะหรือความสัมพันธ์ขององค์ประกอบ เช่น สถานะการเข้าถึงของลิงก์ ( :visited ) สถานะการเลื่อนเมาส์ ( :hover ) และไม่ว่าจะเป็นเอกสารหรือไม่ องค์ประกอบลูกคนแรกใน ( :first-child ) เป็นต้น พวกเขาไม่ได้เปลี่ยนโครงสร้างขององค์ประกอบโดยตรง แต่ส่งผลต่อลักษณะการทำงานขององค์ประกอบภายใต้เงื่อนไขเฉพาะ ตัวเลือกองค์ประกอบหลอก ใช้เพื่อสร้างและเลือกส่วนเฉพาะภายในองค์ประกอบหรือเพื่อสร้างโหนดเนื้อหาเสมือนใหม่ก่อนและหลังองค์ประกอบ ตัวอย่างเช่น :before และ :after สามารถใช้เพื่อแทรกเนื้อหาเพิ่มเติม :first-line และ :first-letter เลือกบรรทัดแรกของข้อความและตัวอักษรตัวแรกขององค์ประกอบตามลำดับ :marker ควบคุมสไตล์การทำเครื่องหมายรายการ ฯลฯ . องค์ประกอบหลอกเหล่านี้ไม่สอดคล้องกับองค์ประกอบจริงในเอกสาร HTML แต่สามารถใช้สไตล์กับองค์ประกอบเหล่านั้นได้ราวกับว่าเป็นส่วนจริงของเอกสาร
ตัวระบุไวยากรณ์ :
คลาสหลอก มักจะระบุด้วยเครื่องหมายโคลอน : :) เช่น :hover , :focus องค์ประกอบหลอก จะถูกระบุใน CSS3 ด้วยโคลอนสองตัวติดต่อกัน ( :: ) เพื่อแยกความแตกต่างจากคลาสหลอกใน CSS เวอร์ชันเก่า แม้ว่าเบราว์เซอร์สมัยใหม่ส่วนใหญ่ยังคงยอมรับเครื่องหมายทวิภาคเดี่ยวเพื่อแสดงองค์ประกอบหลอก (เช่น :before ) เพื่อให้เป็นไปตามมาตรฐาน W3C และรักษาแนวปฏิบัติที่ดีที่สุด ขอแนะนำให้ใช้รูปแบบทวิภาคคู่ เช่น ::before , ::after .
การใช้ซ้ำ :
คลาสเทียม สามารถรวมกันได้ในตัวเลือกเดียวกัน เช่น a:hover:focus เพื่อแสดงลิงก์ที่มีทั้งการโฮเวอร์และโฟกัส องค์ประกอบหลอก โดยทั่วไปไม่สามารถปรากฏซ้ำๆ ในตัวเลือกเดียวกันได้ เนื่องจากเป็นตัวแทนส่วนเฉพาะขององค์ประกอบหรือเนื้อหาใหม่ที่สร้างขึ้น องค์ประกอบสามารถมีองค์ประกอบเทียม :before หรือ :after ได้เพียงองค์ประกอบเดียวเท่านั้นในเวลาเดียวกัน
องค์ประกอบหลอก CSS3 เป็นตัวเลือก CSS พิเศษที่ช่วยให้นักพัฒนาสามารถเพิ่มหรือแก้ไขสไตล์ของส่วนเฉพาะขององค์ประกอบผ่าน CSS โดยไม่ต้องแก้ไขโครงสร้าง HTML หรือเพื่อสร้างและควบคุมเนื้อหาเสมือนภายในหรือภายนอกองค์ประกอบ ต่อไปนี้เป็นคำอธิบายโดยละเอียดและตัวอย่างการใช้งานขององค์ประกอบหลอก CSS3 ทั่วไปหลายรายการ:
1. :before และ :after
องค์ประกอบหลอก :before และ :after แต่ละองค์ประกอบจะสร้าง "องค์ประกอบย่อย" ใหม่ที่ไม่มีเนื้อหาและมองไม่เห็น หลังจากพื้นที่เนื้อหาขององค์ประกอบที่เลือก จากนั้น ด้วยการตั้งค่าสไตล์ (เช่น เนื้อหา ขนาด สี พื้นหลัง ฯลฯ) ให้กับองค์ประกอบเทียมนี้ องค์ประกอบดังกล่าวจะมองเห็นได้และปรากฏเป็นภาพเป็นส่วนที่ต่อจากเนื้อหาขององค์ประกอบดั้งเดิมทันที เนื้อหาเหล่านี้ถูกกำหนดโดยแอตทริบิวต์ content และสามารถใช้สไตล์เพิ่มเติมได้
ไวยากรณ์ :
ตัวเลือก: ก่อน {
เนื้อหา: "..." /* หรือค่าอื่นๆ */;
/* ประกาศรูปแบบอื่น ๆ */
-
ตัวเลือก: หลังจาก {
เนื้อหา: "..." /* หรือค่าอื่นๆ */;
/* ประกาศรูปแบบอื่น ๆ */
- ในหมู่พวกเขา คุณลักษณะ content เป็นกุญแจสำคัญในการกำหนดเนื้อหาที่สร้างโดยองค์ประกอบหลอก สามารถยอมรับค่าต่อไปนี้:
String : ระบุข้อความที่จะแสดงโดยตรง เอนทิตี HTML ที่ล้อมรอบด้วยเครื่องหมายคำพูด : เช่น content: "—"; URL : แทรกทรัพยากรรูปภาพ เช่น content: url(image.png); สร้างคีย์เวิร์ดของเนื้อหา : เช่น content: counter(name); (counter) หรือ content: attr(attribute-name); (รับค่าแอตทริบิวต์ขององค์ประกอบ)
ตัวอย่างการใช้งาน :
1.1. เพิ่มเนื้อหาการตกแต่ง
เพิ่มคำพูด ไอคอน หรือองค์ประกอบตกแต่งอื่นๆ
เพิ่มคำพูด:
blockquote: ก่อน {
เนื้อหา: open-quote;
ขนาดตัวอักษร: ใหญ่ขึ้น;
สี: #666;
-
blockquote: หลังจาก {
เนื้อหา: คำพูดปิด;
-เพิ่มไอคอนที่กำหนดเองก่อน/หลังรายการ:
ลี้: ก่อน {
เนื้อหา: url (icon-checkmark.svg);
ขอบขวา: 0.5em;
-
li. เสร็จสิ้น: หลังจาก {
เนื้อหา: "2713"; /* อักขระ Unicode: เครื่องหมายถูก */
สี: สีเขียว;
ขนาดตัวอักษร: 1.5em;
แนวตั้ง-จัด: super;
-1.2. ล้างโฟลต
:after มักใช้เพื่อสร้างองค์ประกอบระดับบล็อกที่ว่างเปล่า และใช้กับ clear:both เพื่อล้างผลกระทบของการลอยในองค์ประกอบที่ตามมา และหลีกเลี่ยงปัญหา "การยุบของความสูง"
.clearfix: หลังจาก {
เนื้อหา: "";
จอแสดงผล: ตาราง;
ชัดเจน: ทั้งสอง;
- ใช้คลาส .clearfix กับองค์ประกอบคอนเทนเนอร์ที่ต้องเคลียร์โฟลตภายใน
1.3 แทนที่หรือขยายเนื้อหา HTML
เมื่อใช้ฟังก์ชัน attr() คุณสามารถแยกค่าจากแอตทริบิวต์ขององค์ประกอบเป็นเนื้อหาของ :after เพื่อให้ได้การแสดงข้อความแบบไดนามิก
abbr[ชื่อ]:หลัง {
เนื้อหา: " (" attr(title) ")";
ขนาดตัวอักษร: เล็กกว่า;
สี: สีเทา;
- ในตัวอย่างนี้ เมื่อวางเมาส์ไว้เหนือองค์ประกอบ abbr ด้วยแอตทริบิวต์ title วงเล็บสีเทาเล็กๆ ที่มีค่าของแอตทริบิวต์ title จะปรากฏขึ้น
1.4 ใช้รูปทรงและภาพเคลื่อนไหวที่ซับซ้อน
เมื่อรวมกับ content background border และคุณสมบัติอื่นๆ รวมถึง transform CSS3 transition หรือ animation คุณสามารถใช้ :after เพื่อสร้างรูปร่างที่ซับซ้อนและเอฟเฟกต์ภาพเคลื่อนไหวได้
. ปุ่ม: หลังจาก {
เนื้อหา: "";
จอแสดงผล: อินไลน์บล็อก;
ความกว้าง: 0;
ความสูง: 0;
ขอบด้านบน: ⅓emทึบโปร่งใส;
ขอบขวา: ⅓emทึบโปร่งใส;
ขอบล่าง: ⅓em solid #007BFF;
ขอบซ้าย: ⅓emทึบโปร่งใส;
ขอบซ้าย: 0.½em;
-
.button:โฮเวอร์:หลังจาก {
แปลงร่าง: แปล Y(-0.1em);
การเปลี่ยนแปลง: เปลี่ยนความง่ายในการเข้า-ออก 0.2 วินาที;
- โค้ดด้านบนสร้างลูกศรแบบเลื่อนลงรูปสามเหลี่ยมหลังองค์ประกอบ .button และใช้ภาพเคลื่อนไหวที่ราบรื่นลงเมื่อวางเมาส์เหนือ
สิ่งที่ควรทราบ
ต้องใช้องค์ประกอบหลอก :after กับแอตทริบิวต์ content มิฉะนั้นจะไม่มีผลใดๆ เนื่องจาก :after เป็นองค์ประกอบเสมือนที่สร้างขึ้น การดำเนินการ DOM จึงไม่สามารถทำได้ผ่าน JavaScript แม้ว่าเนื้อหาที่สร้างโดย :after สามารถมีส่วนร่วมในเลย์เอาต์ได้ แต่เนื้อหานั้นจะไม่รวมอยู่ใน DOM ไม่ส่งผลกระทบต่อความหมาย และไม่ส่งผลกระทบต่อฟังก์ชันการช่วยสำหรับการเข้าถึง เช่น การนำทางด้วยแป้นพิมพ์
โดยสรุป ตัวเลือกองค์ประกอบหลอก CSS3 ช่วยเพิ่มความหมายของการออกแบบเว็บไซต์อย่างมาก โดยการแทรกเนื้อหาที่กำหนดเองหลังเนื้อหาองค์ประกอบโดยไม่ต้องเปลี่ยนโครงสร้าง HTML การใช้องค์ประกอบหลอกและเทคนิค CSS อื่นๆ อย่างเชี่ยวชาญสามารถช่วยให้นักพัฒนาสร้างเว็บอินเทอร์เฟซที่สวยงาม ตอบสนองได้ดี และบำรุงรักษาง่ายยิ่งขึ้น
2. :first-line และ :first-letter
ตัวเลือกองค์ประกอบเทียม :first-line ใช้เพื่อจัดสไตล์บรรทัดแรกของข้อความภายในองค์ประกอบ ในขณะที่ตัวเลือก :first-letter pseudo-element ใช้เพื่อจัดสไตล์ตัวอักษรตัวแรกภายในองค์ประกอบ
ไวยากรณ์ :
ตัวเลือก:บรรทัดแรก {
/* ประกาศรูปแบบ */
-
ตัวเลือก:อักษรตัวแรก {
/* ประกาศรูปแบบ */
-ตัวอย่างการใช้งาน :
เยื้องบรรทัดแรก:
บทความ p:บรรทัดแรก {
เยื้องข้อความ: 2em;
-การใช้อักษรตัวพิมพ์ใหญ่และการตกแต่ง:
บทความ h2:อักษรตัวแรก {
ขนาดตัวอักษร: 2em;
ลอย: ซ้าย;
ขอบขวา: 0.5em;
ความสูงของเส้น: 0.8;
สี: #8A2BE2;
สีพื้นหลัง: #F8F8FF;
ช่องว่างภายใน: 0.⅔em 0.⅓em;
รัศมีเส้นขอบ: 0.5em;
-ตัวเลือกคลาสเทียม CSS3 เป็นเครื่องมืออันทรงพลังที่ช่วยให้นักพัฒนาสามารถวางตำแหน่งและใช้สไตล์ได้อย่างแม่นยำโดยอิงตามสถานะขององค์ประกอบ แทนที่จะวางตำแหน่งในแผนผังเอกสารหรือคุณลักษณะโดยธรรมชาติ เช่น คลาสและ ID ตัวเลือกเหล่านี้ใช้โครงสร้างไวยากรณ์พิเศษเพื่ออธิบายสถานะตามเงื่อนไขต่างๆ ขององค์ประกอบ เช่น การโต้ตอบของผู้ใช้ ความสัมพันธ์ของตำแหน่ง คุณลักษณะของเนื้อหา ฯลฯ ด้วยเหตุนี้จึงบรรลุการออกแบบเว็บแบบไดนามิกและตอบสนอง ด้านล่างนี้เป็นคำอธิบายโดยละเอียดของตัวเลือกคลาสหลอก CSS3 และตัวอย่างการใช้งานจริง
1. ตัวเลือกคลาสหลอกแบบคงที่
:link และ :visited
:link : ใช้เพื่อเลือกไฮเปอร์ลิงก์ ( <a> องค์ประกอบ) ที่ผู้ใช้ยังไม่ได้เยี่ยมชม โดยทั่วไปจะใช้เพื่อกำหนดรูปแบบพื้นฐานสำหรับลิงก์ที่ไม่ได้เข้าชม
เป็น: ลิงค์ {
สี: สีฟ้า;
การตกแต่งข้อความ: ไม่มี;
- :visited : เลือกลิงค์ที่ผู้ใช้เคยเยี่ยมชม ใช้เพื่อกำหนดสไตล์ที่แตกต่างสำหรับลิงก์ที่เยี่ยมชม
เป็น: เยี่ยมชม {
สี: สีม่วง;
- 2. ตัวเลือกคลาสหลอกโต้ตอบกับผู้ใช้ :hover , :focus , :active
:hover : จับคู่องค์ประกอบเมื่อตัวชี้เมาส์วางอยู่เหนือองค์ประกอบนั้น
ปุ่ม: โฮเวอร์ {
สีพื้นหลัง: #f0f0f0;
เคอร์เซอร์: ตัวชี้;
- :focus : เลือกองค์ประกอบที่ได้รับการโฟกัส ซึ่งพบได้ทั่วไปในการควบคุมแบบฟอร์มหรือองค์ประกอบที่สามารถโฟกัสได้ (เช่น <input> , <textarea> , <button> ฯลฯ)
อินพุต:โฟกัส {
โครงร่าง: 2px ทึบ #007BFF;
กล่องเงา: 0 0 0 0.2rem rgba (0, 123, 255, 0.25);
- :active : ใช้เพื่อระบุว่าผู้ใช้กำลังเปิดใช้งานหรือกดองค์ประกอบ (โดยปกติจะคลิกเมาส์หรือกดบนหน้าจอสัมผัส)
เป็น:ใช้งานอยู่ {
สี: สีแดง;
น้ำหนักตัวอักษร: ตัวหนา;
- 3. ตัวเลือกคลาสหลอกที่มีโครงสร้าง :first-child , :last-child , :only-child , :nth-child(n) ฯลฯ
:first-child : เลือกองค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบหลัก
li: ลูกคนแรก {
รายการสไตล์ประเภท: สี่เหลี่ยม;
- :last-child : เลือกองค์ประกอบที่เป็นลูกสุดท้ายขององค์ประกอบหลัก
div > p:ลูกคนสุดท้าย {
ขอบล่าง: 0;
- :only-child : เลือกองค์ประกอบที่ไม่มีพี่น้อง
.message:ลูกคนเดียว {
เส้นขอบกว้าง: 2px;
- :nth-child(n) : เลือกองค์ประกอบย่อยที่ n ขององค์ประกอบหลัก โดยที่ n อาจเป็นตัวเลข คีย์เวิร์ด ( even , odd ) หรือสูตร (เช่น 2n+1 )
li: n-child (2n) {
สีพื้นหลัง: #f9f9f9;
-4. ตัวเลือกคลาสหลอกที่เกี่ยวข้องกับเนื้อหา
:empty , :target , :enabled , :disabled , :checked ฯลฯ
:empty : เลือกองค์ประกอบที่ไม่มีเนื้อหาใดๆ (รวมถึงองค์ประกอบย่อย โหนดข้อความ ฯลฯ)
div.empty:ว่าง {
จอแสดงผล: ไม่มี;
- :target : เลือกองค์ประกอบที่มีตัวระบุส่วนย่อยของ URL ปัจจุบัน (แฮช) ตรงกับรหัสองค์ประกอบ
#content:เป้าหมาย {
สีพื้นหลัง: สีเหลืองอ่อน;
- :enabled และ :disabled: เลือกองค์ประกอบแบบฟอร์มในสถานะเปิดใช้งานและปิดใช้งานตามลำดับ
อินพุต: เปิดใช้งาน {
สีพื้นหลัง: สีขาว;
-
อินพุต: ปิดการใช้งาน {
ความทึบ: 0.6;
เคอร์เซอร์: ไม่อนุญาต;
- :checked : ใช้เมื่อมีการเลือกช่องทำเครื่องหมาย ( <input type="checkbox"> ), ปุ่มตัวเลือก ( <input type="radio"> ) หรือ <option> องค์ประกอบ
อินพุต [type = "ช่องทำเครื่องหมาย"]: เลือกแล้ว + ป้ายกำกับ {
การตกแต่งข้อความ: เส้นผ่าน;
-5. ลบล้างตัวเลือกคลาสหลอก
:not(selector)
:not() : เลือกองค์ประกอบที่ไม่ตรงกับตัวเลือกที่ระบุในวงเล็บ
/* ยกเว้นทุกย่อหน้าที่มีคลาส "exclude" */
p:ไม่(.ไม่รวม) {
สี: สีเขียว;
-6. ตัวเลือกคลาสหลอกอื่น ๆ
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type ฯลฯ
:root : เลือกองค์ประกอบรากของเอกสาร (โดยปกติจะเป็นองค์ประกอบ <html> ในเอกสาร HTML)
:ราก {
--สีหลัก: #3498db;
- :nth-of-type(n) และ :nth-last-of-type(n): คล้ายกับ :nth-child(n) แต่สำหรับองค์ประกอบลูกประเภทเฉพาะระหว่างองค์ประกอบพี่น้องเท่านั้น
บทความ: nth-of-type (คู่) {
สีพื้นหลัง: #f5f5f5;
- :first-of-type , :last-of-type และ :only-of-type: ตามลำดับเลือกองค์ประกอบลูกแรก รายการสุดท้าย หรือรายการเดียวของประเภทเฉพาะระหว่างองค์ประกอบพี่น้อง
div > p:ประเภทแรก {
น้ำหนักตัวอักษร: ตัวหนา;
-ด้วยการเรียนรู้ตัวเลือกคลาสเทียม CSS3 ข้างต้นและสถานการณ์การใช้งาน นักพัฒนาสามารถเขียนโค้ด CSS ที่มีประสิทธิภาพ แสดงออกได้ และโต้ตอบได้มากขึ้น เพื่อปรับปรุงประสบการณ์ผู้ใช้และเอฟเฟ็กต์ภาพของเว็บไซต์ เนื่องจากมาตรฐาน CSS ยังคงพัฒนาต่อไป ตัวเลือกคลาสเทียมใหม่ๆ มากขึ้นอาจเข้าร่วมอันดับของ CSS3 เพื่อให้วิธีการควบคุมที่สมบูรณ์และซับซ้อนยิ่งขึ้นสำหรับการพัฒนาส่วนหน้า
ไม่ว่าจะเป็นคลาสหลอกหรือองค์ประกอบหลอก ทั้งหมดนี้ได้รับการออกแบบมาเพื่อปรับปรุงการทำงานของตัวเลือก CSS ช่วยให้นักพัฒนาสามารถควบคุมสไตล์และเลย์เอาต์ขององค์ประกอบได้ละเอียดยิ่งขึ้นโดยไม่ต้องเปลี่ยนโครงสร้าง HTML
นี่เป็นการสรุปบทความนี้เกี่ยวกับความแตกต่าง คำอธิบายโดยละเอียด และตัวอย่างการใช้งานขององค์ประกอบหลอก CSS3 และตัวเลือกคลาสหลอก สำหรับข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบหลอก CSS3 และตัวเลือกคลาสหลอก โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูต่อ บทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าคุณจะสนับสนุน downcodes.com ในอนาคต!