CSS หลอกชั้นเรียน
CSS เตอร์หลอกชั้นถูกนำมาใช้เพื่อเพิ่มผลพิเศษบางอย่าง
ไวยากรณ์
ไวยากรณ์หลอกชั้น:
คลาส CSS ยังสามารถใช้หลอกชั้น:
สมอเรียนหลอก
สนับสนุน CSS ในเบราว์เซอร์ของรัฐที่แตกต่างกันของการเชื่อมโยงที่สามารถแสดงผลในรูปแบบที่แตกต่างกัน
ตัวอย่าง
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
ลอง»
หมายเหตุ: ความคมชัด CSS, A: โฉบต้องอยู่ใน A: การเชื่อมโยงและ A: หลังจากที่เข้าเยี่ยมชมที่มีประสิทธิภาพ
หมายเหตุ: ความคมชัด CSS, A: การใช้งานจะต้องอยู่ใน A: โฉบหลังจากนั้นจะมีประสิทธิภาพ
หมายเหตุ: ชื่อของหลอกชั้นไม่ได้เป็นกรณี ๆ ไป
หลอกชั้นเรียนและคลาส CSS
หลอกเรียนสามารถนำมาใช้ร่วมกับคลาส CSS:
<a class="red" href="css-syntax.html"> CSS ไวยากรณ์ </a>
หากลิงก์ตัวอย่างข้างต้นได้รับการเข้าชมก็จะแสดงเป็นสีแดง
CSS - แรก - เด็กหลอกชั้น
คุณสามารถใช้: ครั้งแรกที่เด็กหลอกชั้นเลือกองค์ประกอบลูกคนแรก
หมายเหตุ: คุณจะต้องประกาศในรุ่นก่อนหน้าของ IE8 <DOCTYPE!> เช่นนี้ครั้งแรกของเด็กที่จะมีผลบังคับใช้
ตรงกับครั้งแรก <p> องค์ประกอบ
ในตัวอย่างต่อไปนี้เลือกตรงกับองค์ประกอบ <p> เป็นลูกคนแรกขององค์ประกอบองค์ประกอบใด ๆ :
ตัวอย่าง
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
ลอง»
ตรงกับทุก <p> องค์ประกอบในครั้งแรก <i> องค์ประกอบ
ครั้งแรก <i> องค์ประกอบในตัวอย่างต่อไปนี้ตัวเลือกตรงกับ <p> องค์ประกอบ:
ตัวอย่าง
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
ลอง»
<H2 ของการแข่งขันทั้งหมดเป็นองค์ประกอบลูกคนแรกขององค์ประกอบ <p> ในทุก <i> องค์ประกอบ:
ตัวอย่าง
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
ลอง»
CSS -: lang หลอกชั้น
: หรั่งหลอกชั้นช่วยให้คุณมีความสามารถที่แตกต่างกันสำหรับภาษาที่กำหนดกฎพิเศษ
หมายเหตุ: IE8 ต้องประกาศ <! DOCTYPE> เพื่อสนับสนุน; lang หลอกชั้น
ในตัวอย่างต่อไปนี้ ,: lang ประเภทระดับค่าแอตทริบิวต์ของ Q ไม่มีคำพูดคำนิยามองค์ประกอบ:
ตัวอย่าง
<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>
ลอง»
ตัวอย่างเพิ่มเติม
เพิ่มรูปแบบที่แตกต่างกันเพื่อเชื่อมโยงหลายมิติ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มรูปแบบอื่น ๆ ที่จะเชื่อมโยงหลายมิติ
การใช้งาน: โฟกัส
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้: เน้นหลอกชั้น
CSS ทั้งหมดหลอกเรียน / องค์ประกอบ
| ผู้เลือก | ตัวอย่าง | ตัวอย่างที่แสดงให้เห็น |
|---|---|---|
| : การตรวจสอบ | input:checked | องค์ประกอบรูปแบบที่เลือกไว้ทั้งหมด |
| : คนพิการ | input:disabled | เลือกองค์ประกอบของแบบฟอร์มพิการทั้งหมด |
| : ว่างเปล่า | p:empty | เลือกองค์ประกอบ P ทั้งหมดไม่มีลูก |
| : เปิดใช้งาน | input:enabled | เลือกองค์ประกอบของแบบฟอร์มที่เปิดใช้งาน |
| : ครั้งแรกของชนิด | p:first-of-type | เลือกแต่ละองค์ประกอบหลักเป็นครั้งแรกองค์ประกอบของเด็กองค์ประกอบ P P |
| ในช่วง | input:in-range | เลือกค่าองค์ประกอบภายในช่วงที่ระบุ |
| : ที่ไม่ถูกต้อง | input:invalid | เลือกองค์ประกอบที่ไม่ถูกต้องทั้งหมด |
| : สุดท้ายเด็ก | p:last-child | เลือกองค์ประกอบ P ทั้งหมดที่อยู่ในองค์ประกอบของเด็กที่ผ่านมา |
| : สุดท้ายของชนิด | p:last-of-type | เลือกแต่ละองค์ประกอบ P เป็นองค์ประกอบสุดท้ายขององค์ประกอบหลัก P |
| : ไม่ได้ (เลือก) | :not(p) | เลือกทุกองค์ประกอบอื่น ๆ นอกเหนือจากค่า P |
| : ที่ n เด็ก (N) | p:nth-child(2) | เลือกองค์ประกอบ P ทั้งหมดในที่สององค์ประกอบย่อย |
| : ที่ n-สุดท้ายเด็ก (n ) | p:nth-last-child(2) | เลือกองค์ประกอบทั้งหมดของผกผันของ P สององค์ประกอบเด็ก |
| : ที่ n-สุดท้ายของชนิด (N) | p:nth-last-of-type(2) | เลือกองค์ประกอบ P ทั้งหมดซึ่งกันและกันของสององค์ประกอบย่อยพี |
| : ที่ n ของประเภท (n ) | p:nth-of-type(2) | เลือกองค์ประกอบ P ทั้งหมดในที่สององค์ประกอบย่อยสำหรับพี |
| เพียง แต่ของประเภท | p:only-of-type | เลือกทั้งหมดเป็นเพียงแค่องค์ประกอบลูกขององค์ประกอบ P |
| เพียงเด็ก | p:only-child | เลือกทั้งหมดเป็นเพียงแค่องค์ประกอบลูกขององค์ประกอบ P |
| : ตัวเลือก | input:optional | เลือกที่จะไม่แอตทริบิวต์ "จำเป็น" ขององค์ประกอบ |
| : ออกจากช่วง | input:out-of-range | เลือกองค์ประกอบแอตทริบิวต์นอกช่วงที่ระบุของค่า |
| : อ่านอย่างเดียว | input:read-only | เลือกแอตทริบิวต์อ่านอย่างเดียวของคุณลักษณะองค์ประกอบ |
| : อ่านเขียน | input:read-write | เลือกที่จะไม่อ่านอย่างเดียวแอตทริบิวต์ของคุณสมบัติองค์ประกอบ |
| จำเป็น | input:required | เลือก "จำเป็น" แอตทริบิวต์ระบุคุณสมบัติองค์ประกอบ |
| : ราก | root | เลือกองค์ประกอบรากของเอกสาร |
| : เป้าหมาย | #news:target | เลือกองค์ประกอบกิจกรรมปัจจุบัน #news (คลิกที่ URL ที่มีชื่อของสมอก) |
| : ถูกต้อง | input:valid | เลือกค่าที่ถูกต้องทั้งหมดสำหรับคุณสมบัติ |
| : การเชื่อมโยง | 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> องค์ประกอบไปเป็นค่าเริ่มต้น |