CSS หลอกองค์ประกอบ
CSS องค์ประกอบหลอกถูกนำมาใช้เพื่อเพิ่มบางผลกระทบเตอร์พิเศษ
ไวยากรณ์
ไวยากรณ์หลอกองค์ประกอบ:
คลาส CSS ยังสามารถใช้หลอกองค์ประกอบ:
: บรรทัดแรกองค์ประกอบหลอก
"บรรทัดแรก" หลอกองค์ประกอบที่ใช้ในการตั้งค่ารูปแบบพิเศษเพื่อบรรทัดแรกของข้อความ
ในตัวอย่างต่อไป, เบราว์เซอร์จะขึ้นอยู่กับ "บรรทัดแรก" หลอกองค์ประกอบในรูปแบบของบรรทัดแรกของข้อความในรูปแบบองค์ประกอบพี:
หมายเหตุ: "บรรทัดแรก" หลอกองค์ประกอบสามารถใช้เฉพาะสำหรับองค์ประกอบระดับบล็อก
หมายเหตุ: คุณสมบัติต่อไปนี้สามารถนำไปใช้กับ "บรรทัดแรก" หลอกองค์ประกอบ:
- คุณสมบัติแบบอักษร
- คุณสมบัติสี
- คุณสมบัติพื้นหลัง
- คำเว้นวรรค
- ตัวอักษรการเว้นวรรค
- ตกแต่งข้อความ
- แนวตั้ง-align
- ข้อความเปลี่ยน
- line-height
- ชัดเจน
: First ตัวอักษรหลอกองค์ประกอบ
"ครั้งแรกที่ตัวอักษร" หลอกองค์ประกอบที่ใช้ในการตั้งค่ารูปแบบพิเศษให้กับตัวอักษรตัวแรกของข้อความ:
หมายเหตุ: "ครั้งแรกของตัวอักษร" หลอกองค์ประกอบสามารถใช้เฉพาะสำหรับองค์ประกอบระดับบล็อก
หมายเหตุ: คุณสมบัติต่อไปนี้สามารถนำไปใช้ "ครั้งแรกตัวอักษร" หลอกองค์ประกอบ:
- คุณสมบัติแบบอักษร
- คุณสมบัติสี
- คุณสมบัติพื้นหลัง
- คุณสมบัติอัตรากำไรขั้นต้น
- คุณสมบัติ padding
- คุณสมบัติชายแดน
- ตกแต่งข้อความ
- แนวตั้ง-align (เฉพาะในกรณีที่ "ลอย" เป็น "ไม่มี")
- ข้อความเปลี่ยน
- line-height
- ลอย
- ชัดเจน
หลอกองค์ประกอบและการเรียน CSS
Pseudo องค์ประกอบสามารถใช้ร่วมกับคลาส CSS:
<p class="article">A paragraph in an article</p>
ตัวอย่างข้างต้นจะทำให้ระดับทั้งหมดเป็นตัวอักษรตัวแรกของบทความวรรคเปลี่ยนเป็นสีแดง
หลาย Pseudo-องค์ประกอบ
ใหญ่ของหลอกองค์ประกอบสามารถรวมกันเพื่อใช้
ในตัวอย่างต่อไปนี้วรรคแรกของตัวอักษรจะถูกแสดงในสีแดงขนาดตัวอักษรเป็น XX-ขนาดใหญ่ บรรทัดแรกของข้อความที่เหลือจะเป็นสีฟ้า, สีและขนาดเล็กตัวพิมพ์ใหญ่
ส่วนที่เหลืออีกย่อหน้าของข้อความในขนาดตัวอักษรปกติและสีที่จะแสดง:
ตัวอย่าง
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
ลอง»
CSS -: ก่อนที่จะหลอกองค์ประกอบ
"ก่อน" หลอกองค์ประกอบสามารถแทรกเนื้อหาใหม่ในด้านหน้าของเนื้อหาขององค์ประกอบ
ตัวอย่างต่อไปนี้เพื่อแทรกภาพในด้านหน้าของแต่ละ <h1> องค์ประกอบ:
CSS -: หลังจากหลอกองค์ประกอบ
"หลังจากที่" หลอกองค์ประกอบสามารถแทรกเนื้อหาใหม่หลังเนื้อหาขององค์ประกอบ
ตัวอย่างต่อไปนี้แทรกรูปภาพหลังจากแต่ละ <h1> องค์ประกอบ:
CSS ทั้งหมดหลอกเรียน / องค์ประกอบ
| ผู้เลือก | ตัวอย่าง | ตัวอย่างที่แสดงให้เห็น |
|---|---|---|
| : การเชื่อมโยง | 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> องค์ประกอบไปเป็นค่าเริ่มต้น |