อะไรคือ Pseudo-เรียน?
หลอกชั้นจะใช้ในการกำหนดสถานะพิเศษขององค์ประกอบ
ยกตัวอย่างเช่นมันสามารถใช้ในการ:
- รูปแบบองค์ประกอบเมื่อ mouses ผู้ใช้มากกว่านั้น
- รูปแบบการเข้าเยี่ยมชมและ unvisited การเชื่อมโยงที่แตกต่างกัน
- รูปแบบองค์ประกอบเมื่อได้รับโฟกัส
เมาส์กว่าฉัน
วากยสัมพันธ์
ไวยากรณ์ของหลอกชั้นเรียน:
selector:pseudo-class {
property:value;
}Anchor Pseudo-ชั้นเรียน
ลิงค์ที่สามารถแสดงผลในรูปแบบที่แตกต่างกัน:
ตัวอย่าง
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
ลองตัวเอง»  | หมายเหตุ: a:hover ต้องมาหลังจาก a:link และ a:visited ! CSS ในความหมายในการสั่งซื้อที่จะมีประสิทธิภาพ a:active ต้องมาหลังจาก a:hover ในความหมาย CSS ในการสั่งซื้อที่จะมีประสิทธิภาพ!ชื่อหลอกชั้นไม่ได้เป็นกรณี ๆ ไป |
|---|
หลอกชั้นเรียนและคลาส CSS
หลอกเรียนสามารถใช้ร่วมกับคลาส CSS:
เมื่อคุณเลื่อนเมาส์ไปที่การเชื่อมโยงในตัวอย่างก็จะเปลี่ยนสี:
เลื่อนเมาส์ไปวางบน <div>
ตัวอย่างของการใช้ :hover หลอกชั้นบน <div> องค์ประกอบ:
CSS - เดอะ :first-child หลอกชั้น
:first-child หลอกชั้นตรงกับองค์ประกอบที่ระบุว่าเป็นลูกคนแรกขององค์ประกอบอื่น
ตรงกับครั้งแรก <p> องค์ประกอบ
ในตัวอย่างต่อไปนี้ตัวเลือกตรงกับ <p> องค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบใด ๆ :
ตรงกับครั้งแรก <i> องค์ประกอบในทุก <p> องค์ประกอบ
ในตัวอย่างต่อไปนี้ตัวเลือกตรงกับครั้งแรก <i> องค์ประกอบในทุก <p> องค์ประกอบ:
ตรงกับทุก <i> องค์ประกอบในเด็กแรก <p> องค์ประกอบ
ในตัวอย่างต่อไปนี้ตัวเลือกการแข่งขันทั้งหมด <i> องค์ประกอบใน <p> องค์ประกอบที่เป็นลูกคนแรกขององค์ประกอบอื่น:
CSS - เดอะ :lang หลอกชั้น
:lang หลอกชั้นช่วยให้คุณกำหนดกฎพิเศษสำหรับภาษาที่แตกต่างกัน
ในตัวอย่างด้านล่าง :lang กำหนดเครื่องหมายคำพูดสำหรับ <q> องค์ประกอบที่มี lang="no" :
ตัวอย่าง
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
ลองตัวเอง» 
ตัวอย่างเพิ่มเติม
เพิ่มรูปแบบที่แตกต่างกันเพื่อเชื่อมโยงหลายมิติ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มรูปแบบอื่น ๆ ที่จะเชื่อมโยงหลายมิติ
การใช้งานของ :focus
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ :focus หลอกชั้น
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»
ทุกชั้นเรียน 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 เริ่มต้นด้วย "มัน" |
| :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 | เลือกการเชื่อมโยงเข้ามาเยี่ยมชมทั้งหมด |
ทั้งหมด 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 | เลือกส่วนหนึ่งขององค์ประกอบที่เลือกโดยผู้ใช้ |