2. คลาสหลอกและองค์ประกอบหลอก
A. ตัวเลือกลูกหลานหลังจาก :hover
ตัวอย่าง
| a: ช่วงโฮเวอร์ { สี: #0f0; - |
อธิบาย
องค์ประกอบสามารถวางตำแหน่งได้โดยตัวเลือกตามคลาสหลอก :hover เช่นเดียวกับตัวเลือกสืบทอด ตัวอย่างข้างต้นจะเปลี่ยนสีของข้อความในองค์ประกอบ span ภายในองค์ประกอบเมื่อวางเมาส์ไว้
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |
B. เชนหลอกคลาส
ตัวอย่าง
| เป็น: ลูกคนแรก: โฮเวอร์ { สี: #0f0; - |
อธิบาย
คลาสหลอกสามารถถูกล่ามโซ่เพื่อเลือกองค์ประกอบที่แคบลง ตัวอย่างข้างต้นจะค้นหาแท็กแรกภายใต้แต่ละองค์ประกอบหลัก และใช้คลาส P หลอกโฮเวอร์กับแท็กนั้น
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |
C. :โฮเวอร์ในองค์ประกอบที่ไม่ใช่จุดยึด
ตัวอย่าง
| div:โฮเวอร์ { สี: #f00; - |
อธิบาย
คลาสหลอก :hover สามารถนำไปใช้กับสถานะโฮเวอร์ขององค์ประกอบใดๆ ก็ได้ ไม่ใช่แค่แท็ก
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |
D. :ชั้นหลอกลูกคนแรก
ตัวอย่าง
| div li:ลูกคนแรก { พื้นหลัง: สีฟ้า; - |
อธิบาย
เปลี่ยนคลาสหลอกเพื่อค้นหาองค์ประกอบลูกแรกขององค์ประกอบหลักของแต่ละองค์ประกอบที่ระบุ
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |
แมลง
ใน IE7 หากมีความคิดเห็น HTML ก่อนที่องค์ประกอบลูกแรกจะถูกวางตำแหน่ง คลาสหลอกลูกคนแรกจะไม่ถูกต้อง
E. :โฟกัสคลาสหลอก
ตัวอย่าง
| เป็น:โฟกัส { เส้นขอบ: 1px สีแดงทึบ; - |
อธิบาย
คลาสหลอกนี้ค้นหาองค์ประกอบทั้งหมดที่มีโฟกัสของแป้นพิมพ์
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
F. :before และ :after หลอกคลาส
ตัวอย่าง
| #box:ก่อน { เนื้อหา: "ข้อความนี้อยู่หน้ากล่อง"; - #box:หลัง { เนื้อหา: "ข้อความนี้อยู่หลังกล่อง"; - |
อธิบาย
องค์ประกอบหลอกทั้งสองนี้เพิ่มเนื้อหาที่สร้างขึ้นก่อนและหลังองค์ประกอบที่ระบุตามลำดับ และใช้ร่วมกับแอตทริบิวต์เนื้อหา
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
3. การสนับสนุนคุณสมบัติ
A. ขนาดจริงที่สร้างตามตำแหน่ง
ตัวอย่าง
| #กล่อง { ตำแหน่ง: แน่นอน; ด้านบน: 0; ขวา: 100px; ซ้าย: 0; ด้านล่าง: 200px; พื้นหลัง: สีฟ้า; - |
อธิบาย
การกำหนดค่าบน ขวา ล่าง และซ้ายสำหรับองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะทำให้องค์ประกอบมีขนาดตามจริง (ความกว้างและความสูง) แม้ว่าจะไม่มีการตั้งค่าความกว้างและความสูงก็ตาม
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |
B. Min-Height และ Min-Width
ตัวอย่าง
| #กล่อง { ความสูงขั้นต่ำ: 500px; ความกว้างขั้นต่ำ: 300px; - |
อธิบาย
คุณสมบัติทั้งสองนี้ระบุความกว้างและความสูงขั้นต่ำขององค์ประกอบตามลำดับ ทำให้กล่องมีขนาดใหญ่กว่าค่าขั้นต่ำที่ระบุ แต่ไม่เล็กกว่า สามารถใช้ร่วมกันหรือแยกกัน
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |
C. Max-Height และ Max-Width
ตัวอย่าง
| #กล่อง { ความสูงสูงสุด: 500px; ความกว้างสูงสุด: 300px; - |
อธิบาย
คุณสมบัติทั้งสองนี้ระบุความสูงและความกว้างสูงสุดขององค์ประกอบตามลำดับ อนุญาตให้กล่องมีขนาดเล็กกว่าค่าสูงสุดที่ระบุ แต่ไม่ใหญ่กว่า นอกจากนี้ยังสามารถใช้ร่วมกันหรือแยกกันก็ได้
สถานะการสนับสนุน
| IE6 หมายเลข IE7 ใช่ IE8 ใช่ |