บทช่วยสอน CSS หลอกองค์ประกอบ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ไวยากรณ์,: บรรทัดแรกองค์ประกอบหลอก,ตัวอย่าง,: First ตัวอักษรหลอกองค์ประกอบ,ตัวอย่าง,หลอกองค์ประกอบและการเรียน CSS,หลาย Pseudo-องค์ประกอบ,ตัวอย่าง,CSS -: ก่อนที่จะหลอกองค์ประกอบ,ตัวอย่าง,CSS -: หลังจากหลอกองค์ประกอบ,ตัวอย่าง,CSS ทั้งหมดหลอกเรียน / องค์ประกอบ,
CSS องค์ประกอบหลอกถูกนำมาใช้เพื่อเพิ่มบางผลกระทบเตอร์พิเศษ
ไวยากรณ์หลอกองค์ประกอบ:
คลาส CSS ยังสามารถใช้หลอกองค์ประกอบ:
"บรรทัดแรก" หลอกองค์ประกอบที่ใช้ในการตั้งค่ารูปแบบพิเศษเพื่อบรรทัดแรกของข้อความ
ในตัวอย่างต่อไป, เบราว์เซอร์จะขึ้นอยู่กับ "บรรทัดแรก" หลอกองค์ประกอบในรูปแบบของบรรทัดแรกของข้อความในรูปแบบองค์ประกอบพี:
หมายเหตุ: "บรรทัดแรก" หลอกองค์ประกอบสามารถใช้เฉพาะสำหรับองค์ประกอบระดับบล็อก
หมายเหตุ: คุณสมบัติต่อไปนี้สามารถนำไปใช้กับ "บรรทัดแรก" หลอกองค์ประกอบ:
"ครั้งแรกที่ตัวอักษร" หลอกองค์ประกอบที่ใช้ในการตั้งค่ารูปแบบพิเศษให้กับตัวอักษรตัวแรกของข้อความ:
หมายเหตุ: "ครั้งแรกของตัวอักษร" หลอกองค์ประกอบสามารถใช้เฉพาะสำหรับองค์ประกอบระดับบล็อก
หมายเหตุ: คุณสมบัติต่อไปนี้สามารถนำไปใช้ "ครั้งแรกตัวอักษร" หลอกองค์ประกอบ:
Pseudo องค์ประกอบสามารถใช้ร่วมกับคลาส CSS:
ตัวอย่างข้างต้นจะทำให้ระดับทั้งหมดเป็นตัวอักษรตัวแรกของบทความวรรคเปลี่ยนเป็นสีแดง
ใหญ่ของหลอกองค์ประกอบสามารถรวมกันเพื่อใช้
ในตัวอย่างต่อไปนี้วรรคแรกของตัวอักษรจะถูกแสดงในสีแดงขนาดตัวอักษรเป็น XX-ขนาดใหญ่ บรรทัดแรกของข้อความที่เหลือจะเป็นสีฟ้า, สีและขนาดเล็กตัวพิมพ์ใหญ่
ส่วนที่เหลืออีกย่อหน้าของข้อความในขนาดตัวอักษรปกติและสีที่จะแสดง:
"ก่อน" หลอกองค์ประกอบสามารถแทรกเนื้อหาใหม่ในด้านหน้าของเนื้อหาขององค์ประกอบ
ตัวอย่างต่อไปนี้เพื่อแทรกภาพในด้านหน้าของแต่ละ <h1> องค์ประกอบ:
"หลังจากที่" หลอกองค์ประกอบสามารถแทรกเนื้อหาใหม่หลังเนื้อหาขององค์ประกอบ
ตัวอย่างต่อไปนี้แทรกรูปภาพหลังจากแต่ละ <h1> องค์ประกอบ:
ผู้เลือก | ตัวอย่าง | ตัวอย่างที่แสดงให้เห็น |
---|---|---|
: การเชื่อมโยง | a:link | เลือกการเชื่อมโยง unvisited ทั้งหมด |
: เยี่ยมชม | a:visited | เลือกการเชื่อมโยงเข้ามาเยี่ยมชมทั้งหมด |
: การใช้งาน | a:active | เลือกเป็นลิงค์ที่ใช้งาน |
: โฉบ | a:hover | วางเมาส์บนสถานะการเชื่อมโยง |
: โฟกัส | input:focus | หลังจากที่เลือกองค์ประกอบเข้ามีโฟกัส |
: ครั้งแรกที่ตัวอักษร | p:first-letter | เลือกตัวอักษรตัวแรกของแต่ละ <p> องค์ประกอบ |
: บรรทัดแรก | p:first-line | เลือกบรรทัดแรกของแต่ละ <p> องค์ประกอบ |
: ครั้งแรกที่เด็ก | p:first-child | <] P> เลือกองค์ประกอบตรงกับองค์ประกอบใด ๆ ที่เป็นองค์ประกอบที่ลูกคนแรก |
ก่อนหน้า | p:before | แทรกเนื้อหาก่อนแต่ละ <p> องค์ประกอบ |
: หลังจาก | p:after | แทรกเนื้อหาหลังจากที่แต่ละ <p> องค์ประกอบ |
: lang (ภาษา) | p:lang(it) | lang เลือกแอตทริบิวต์ <p> องค์ประกอบไปเป็นค่าเริ่มต้น |