อะไรคือ Pseudo องค์ประกอบ?
CSS ขนาดองค์ประกอบหลอกใช้เพื่อระบุรูปแบบส่วนขององค์ประกอบ
ยกตัวอย่างเช่นมันสามารถใช้ในการ:
- รูปแบบตัวอักษรตัวแรกหรือบรรทัดขององค์ประกอบ
- แทรกเนื้อหาก่อนหรือหลังเนื้อหาของธาตุนั้น
วากยสัมพันธ์
ไวยากรณ์ของหลอกองค์ประกอบ:
selector::pseudo-element {
property:value;
} | ขอให้สังเกตสัญกรณ์ลำไส้ใหญ่คู่ - ::first-line เมื่อเทียบกับ :first-line ลำไส้ใหญ่คู่แทนที่โน้ตเดี่ยวลำไส้ใหญ่สำหรับหลอกองค์ประกอบใน CSS3 นี่คือความพยายามจาก W3C ที่จะแยกแยะระหว่างหลอกชั้นเรียนและหลอกองค์ประกอบ ไวยากรณ์เดียวลำไส้ใหญ่ได้ถูกใช้สำหรับทั้งหลอกชั้นเรียนและหลอกองค์ประกอบใน CSS2 และ CSS1 ความเข้ากันได้ย้อนหลังไวยากรณ์เดียวลำไส้ใหญ่เป็นที่ยอมรับสำหรับ CSS2 และ CSS1 หลอกองค์ประกอบ |
|---|
::first-line องค์ประกอบหลอก
::first-line องค์ประกอบหลอกถูกนำมาใช้เพื่อเพิ่มรูปแบบพิเศษเพื่อบรรทัดแรกของข้อความ
ตัวอย่างต่อไปนี้รูปแบบบรรทัดแรกของข้อความในทุก <p> องค์ประกอบ:
หมายเหตุ: ::first-line หลอกองค์ประกอบเท่านั้นที่สามารถนำมาใช้เพื่อป้องกันระดับองค์ประกอบ
คุณสมบัติต่อไปนี้นำไปใช้กับ ::first-line หลอกองค์ประกอบ:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter องค์ประกอบหลอก
::first-letter หลอกองค์ประกอบที่ใช้ในการเพิ่มรูปแบบพิเศษให้กับตัวอักษรตัวแรกของข้อความ
ตัวอย่างต่อไปนี้รูปแบบตัวอักษรตัวแรกของข้อความในทุก <p> องค์ประกอบ:
หมายเหตุ: ::first-letter หลอกองค์ประกอบเท่านั้นที่สามารถนำมาใช้เพื่อป้องกันระดับองค์ประกอบ
คุณสมบัติต่อไปนี้นำไปใช้กับ ::first-letter pseudo- องค์ประกอบ:
- font คุณสมบัติ
- color คุณสมบัติ
- background คุณสมบัติ
- margin คุณสมบัติ
- padding คุณสมบัติ
- border คุณสมบัติ
- text-decoration
- vertical-align (เฉพาะในกรณีที่ "float" คือ "none" )
- text-transform
- line-height
- float
- clear
หลอกองค์ประกอบและการเรียน CSS
Pseudo องค์ประกอบสามารถใช้ร่วมกับคลาส CSS:
ตัวอย่างข้างต้นจะแสดงอักษรตัวแรกของย่อหน้าที่มี class="intro" ในสีแดงและในขนาดที่ใหญ่ขึ้น
หลาย Pseudo-องค์ประกอบ
หลายหลอกองค์ประกอบนอกจากนี้ยังสามารถนำมารวมกัน
ในตัวอย่างต่อไปนี้อักษรตัวแรกของย่อหน้าจะเป็นสีแดงในการขนาดตัวอักษร XX-ขนาดใหญ่ ส่วนที่เหลือของบรรทัดแรกจะเป็นสีฟ้าและในหุ้นขนาดเล็ก ส่วนที่เหลือของย่อหน้าจะเป็นขนาดตัวอักษรปกติและสี:
ตัวอย่าง
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} ลองตัวเอง» CSS - เดอะ ::before องค์ประกอบหลอก
::before หลอกองค์ประกอบสามารถนำมาใช้ในการแทรกเนื้อหาบางอย่างก่อนที่เนื้อหาของธาตุนั้น
ตัวอย่างต่อไปนี้แทรกภาพก่อนเนื้อหาของแต่ละที่ <h1> องค์ประกอบ:
CSS - เดอะ ::after องค์ประกอบหลอก
::after หลอกองค์ประกอบสามารถนำมาใช้ในการแทรกเนื้อหาบางส่วนหลังเนื้อหาของธาตุนั้น
ตัวอย่างต่อไปนี้แทรกภาพหลังจากที่เนื้อหาของแต่ละที่ <h1> องค์ประกอบ:
CSS - เดอะ ::selection องค์ประกอบหลอก
::selection องค์ประกอบหลอกตรงกับส่วนหนึ่งขององค์ประกอบที่เลือกโดยผู้ใช้
คุณสมบัติ CSS ต่อไปนี้สามารถนำไปใช้กับ ::selection : color , background , cursor และ outline
ตัวอย่างต่อไปนี้จะทำให้สีแดงข้อความที่เลือกบนพื้นหลังสีเหลือง:
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 »
ทั้งหมด CSS Pseudo องค์ประกอบ
| ผู้เลือก | ตัวอย่าง | ตัวอย่างคำอธิบาย |
|---|---|---|
| ::after | p::after | ใส่บางสิ่งบางอย่างหลังจากที่เนื้อหาของแต่ละ <p> องค์ประกอบ |
| ::before | p::before | ใส่บางสิ่งบางอย่างก่อนที่เนื้อหาของแต่ละ <p> องค์ประกอบ |
| ::first-letter | p::first-letter | เลือกตัวอักษรตัวแรกของแต่ละ <p> องค์ประกอบ |
| ::first-line | p::first-line | เลือกบรรทัดแรกของแต่ละ <p> องค์ประกอบ |
| ::selection | p::selection | เลือกส่วนหนึ่งขององค์ประกอบที่เลือกโดยผู้ใช้ |
ทุกชั้นเรียน CSS Pseudo
| ผู้เลือก | ตัวอย่าง | ตัวอย่างคำอธิบาย |
|---|---|---|
| :active | a:active | เลือกการเชื่อมโยงการใช้งาน |
| :checked | input:checked | เลือกทุกการตรวจสอบ <input> องค์ประกอบ |
| :disabled | input:disabled | เลือกทุกคนพิการ <input> องค์ประกอบ |
| :empty | p:empty | เลือกทุก <p> องค์ประกอบที่ไม่มีเด็ก |
| :enabled | input:enabled | เลือกเปิดใช้งานทุก <input> องค์ประกอบ |
| :first-child | p:first-child | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนแรกของแม่ |
| :first-of-type | p:first-of-type | เลือกทุก <p> องค์ประกอบที่เป็นครั้งแรก <p> องค์ประกอบของแม่ |
| :focus | input:focus | เลือก <input> องค์ประกอบที่มีโฟกัส |
| :hover | a:hover | เลือกการเชื่อมโยงบนเมาส์มากกว่า |
| :in-range | input:in-range | เลือก <input> องค์ประกอบที่มีมูลค่าอยู่ในช่วงที่ระบุ |
| :invalid | input:invalid | เลือกทั้งหมด <input> องค์ประกอบที่มีค่าไม่ถูกต้อง |
| :lang(language) | p:lang(it) | เลือกทุก <p> องค์ประกอบที่มีค่าแอตทริบิวต์ lang เริ่มต้นด้วย "it" |
| :last-child | p:last-child | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนสุดท้ายของแม่ |
| :last-of-type | p:last-of-type | เลือกทุก <p> องค์ประกอบที่เป็นวันสุดท้าย <p> องค์ประกอบของแม่ |
| :link | a:link | เลือกการเชื่อมโยง unvisited ทั้งหมด |
| :not(selector) | :not(p) | เลือกองค์ประกอบที่ไม่ได้เป็นทุก <p> องค์ประกอบ |
| :nth-child(n) | p:nth-child(2) | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนที่สองของแม่ |
| :nth-last-child(n) | p:nth-last-child(2) | เลือกทุก <p> องค์ประกอบที่เป็นลูกคนที่สองของแม่นับจากเด็กที่ผ่านมา |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | เลือกทุก <p> องค์ประกอบที่เป็นที่สอง <p> องค์ประกอบของแม่นับจากเด็กที่ผ่านมา |
| :nth-of-type(n) | p:nth-of-type(2) | เลือกทุก <p> องค์ประกอบที่เป็นที่สอง <p> องค์ประกอบของแม่ |
| :only-of-type | p:only-of-type | เลือกทุก <p> องค์ประกอบที่นี้ที่เดียว <p> องค์ประกอบของแม่ |
| :only-child | p:only-child | เลือกทุก <p> องค์ประกอบที่เป็นลูกชายคนเดียวของแม่ |
| :optional | input:optional | เลือก <input> องค์ประกอบที่ไม่มี "required" แอตทริบิวต์ |
| :out-of-range | input:out-of-range | เลือก <input> องค์ประกอบที่มีค่านอกช่วงที่ระบุ |
| :read-only | input:read-only | เลือก <input> องค์ประกอบที่มี "readonly" แอตทริบิวต์ที่ระบุ |
| :read-write | input:read-write | เลือก <input> องค์ประกอบที่ไม่มี "readonly" แอตทริบิวต์ |
| :required | input:required | เลือก <input> องค์ประกอบที่มีความ "required" แอตทริบิวต์ที่ระบุ |
| :root | root | เลือกองค์ประกอบรากของเอกสาร |
| :target | #news:target | เลือกใช้งานอยู่ปัจจุบัน #news องค์ประกอบ (คลิกที่ URL ที่มีชื่อสมอนั้น) |
| :valid | input:valid | เลือกทั้งหมด <input> องค์ประกอบที่มีค่าที่ถูกต้อง |
| :visited | a:visited | เลือกการเชื่อมโยงเข้ามาเยี่ยมชมทั้งหมด |