ความแตกต่างระหว่างคลาสหลอกและองค์ประกอบหลอก
(1) คลาส ชื่อคลาสที่ผู้ใช้กำหนด คลาสนี้เป็นคลาสเฉพาะและมองเห็นได้ เช่น div.div0 เลือกองค์ประกอบ div ด้วยคลาส div0
(2) Pseudo-class ใช้เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับตัวเลือกบางตัว สไตล์ที่กำหนดด้วยคลาสหลอกจะไม่ดำเนินการกับเครื่องหมาย แต่ขึ้นอยู่กับสถานะของเครื่องหมาย เช่น :hover สำหรับแท็ก และ :disabled สำหรับองค์ประกอบแบบฟอร์ม
(3) องค์ประกอบ เช่น div, p, h1 ฯลฯ เป็นองค์ประกอบจริง
(4) องค์ประกอบหลอกเป็นองค์ประกอบที่ไม่มีอยู่ใน HTML และใช้สำหรับการแสดงผลใน CSS เท่านั้น องค์ประกอบหลอกสร้างคอนเทนเนอร์เสมือนไม่มีองค์ประกอบ DOM ใด ๆ แต่สามารถมีเนื้อหาได้ เช่น ::ก่อน ::หลัง
ตัวเลือกคลาสหลอก
วัตถุประสงค์ของคลาสหลอกคือการใช้ตัวเลือกเพื่อค้นหาข้อมูลที่ไม่มีอยู่ในแผนผัง DOM และตัวเลือก CSS ทั่วไปไม่สามารถรับได้ คลาสหลอกมักจะเป็นตัวแทนของ "รัฐ" คลาสหลอกเริ่มต้นด้วยเครื่องหมายโคลอน: ตามด้วยชื่อของคลาสหลอกและพารามิเตอร์ทางเลือกที่อยู่ในวงเล็บ
สมอคลาสหลอก
หากคุณตั้งค่าสถานะทั้งสี่ของแท็ก ลำดับจะต้องเป็น LVHA นั่นคือ: link, :visited, :hover, :active
ภายใต้สถานการณ์ปกติ คุณจะต้องตั้งค่าเอฟเฟกต์เริ่มต้นของแท็กและเอฟเฟกต์ของการข้ามเมาส์ a{}, a:hover{}
ตัวเลือกคลาสหลอกเป้าหมาย
:target รูปแบบเป้าหมายหลังไฮเปอร์ลิงก์ เมื่อใช้ไฮเปอร์ลิงก์ เป้าหมายของลิงก์สามารถตั้งค่าด้วยตัวเลือกเป้าหมายได้ สไตล์ที่เกี่ยวข้องจะปรากฏขึ้นหลังจากข้ามเป้าหมายแล้วเท่านั้น
ค่าของแอตทริบิวต์ href ของแท็กสามารถชี้ไปยังที่อยู่ลิงก์ รหัสของแท็ก หรือชื่อของแท็ก
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{พื้นหลัง-สี:#ccc;}</style><p><ahref=#news1>ปุ่ม 1</a></ p><p><ahref=#news2>ปุ่ม 2</a></p><aname=news1>เนื้อหา 1</a><divid=news2>เนื้อหา 2</div>เมื่อคลิกปุ่ม 2 ผลลัพธ์จะปรากฏขึ้น:
ตัวเลือกคลาสหลอกองค์ประกอบแบบฟอร์ม
:in-range ใช้งานได้เฉพาะกับองค์ประกอบที่สามารถระบุค่าช่วงเวลา เช่น คุณลักษณะขั้นต่ำและสูงสุดในองค์ประกอบอินพุต
:invalid ใช้งานได้เฉพาะกับองค์ประกอบที่สามารถระบุค่าช่วงเวลาได้ เช่น แอตทริบิวต์ต่ำสุดและสูงสุดในองค์ประกอบ |input ฟิลด์อีเมลที่ถูกต้อง ฟิลด์ตัวเลขตามกฎหมาย ฯลฯ
ตัวเลือกคลาสหลอกโครงสร้าง
<style>p:first-child{color:red;}/*องค์ประกอบแรกคือ h1 ดังนั้นจึงไม่ได้เลือก*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*องค์ประกอบที่สี่คือ sp และ ดังนั้นจึงไม่ได้เลือก*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/*เลือก p ที่ 7 แล้ว แต่สไตล์ถูกเขียนทับ* / p:ประเภทเดียวเท่านั้น{สี:สีส้ม;}/ *เลือกหน้าที่ 7 และ 8*/</style><h1>หัวข้อ 1</h1><p>หน้าแรก</p><p>หน้าที่สอง</p><span >เนื้อหาข้อความ</p><span span><p>หน้าที่สาม</p><p>หน้าสี่</p><p><i>เนื้อหาข้อความ</i>หน้าห้า</p> <p>ใบที่หก</p><h5>หัวข้อที่ 5</h5><div><p>ใบที่เจ็ด</p></div><div><p>ใบที่แปด</p> p ><span>เนื้อหาข้อความ</span></div><div><p>หน้าเก้า</p><p>หน้าสิบ</p></div>ผลการวิ่ง:
ลบล้างตัวเลือกคลาสหลอก
องค์ประกอบหลอก
องค์ประกอบหลอกสร้างองค์ประกอบนามธรรมบางอย่างในแผนผัง DOM องค์ประกอบนามธรรมเหล่านี้ไม่มีอยู่ในภาษาเอกสาร (สามารถเข้าใจได้ว่าเป็นซอร์สโค้ด html) ตัวอย่างเช่น: อินเทอร์เฟซเอกสารไม่มีกลไกในการเข้าถึงคำแรกหรือบรรทัดของเนื้อหาองค์ประกอบ แต่องค์ประกอบหลอกช่วยให้นักพัฒนาสามารถดึงข้อมูลนี้ได้ นอกจากนี้ องค์ประกอบหลอกบางส่วนยังช่วยให้นักพัฒนาสามารถรับเนื้อหาที่ไม่มีอยู่ในเอกสารต้นฉบับได้ องค์ประกอบหลอกเริ่มต้นด้วยโคลอนสองตัว:: ตามด้วยชื่อขององค์ประกอบหลอก
พูดง่ายๆ ก็คือ องค์ประกอบหลอกจะสร้างคอนเทนเนอร์เสมือนที่ไม่มีองค์ประกอบ DOM ใดๆ แต่สามารถมีเนื้อหาได้
ในตัวเลือกองค์ประกอบหลอกใน CSS3 และตัวเลือกคลาสหลอกใน CSS2 ก่อนและหลังจะเหมือนกันทุกประการ
มีเพียงองค์ประกอบหลอกดังต่อไปนี้:
คุณลักษณะ content ใช้กับองค์ประกอบหลอก :before และ :after เพื่อแทรกเนื้อหาที่สร้างขึ้น คุณสามารถใช้คลาสหลอก + องค์ประกอบหลอก
น้ำหนักสไตล์ CSS
กฎลำดับความสำคัญของ CSS:
(1) เมื่อค่าน้ำหนักของกฎการเลือก CSS แตกต่างกัน กฎที่มีค่าน้ำหนักสูงกว่าจะมีความสำคัญกว่า
(2) เมื่อค่าน้ำหนักของกฎการเลือก CSS เท่ากัน กฎที่กำหนดไว้ในภายหลังจะมีความสำคัญกว่า
(3) เมื่อ !importand ถูกเพิ่มหลังแอตทริบิวต์ CSS จะมีการให้ความสำคัญแบบสัมบูรณ์แบบไม่มีเงื่อนไข
การคำนวณค่าน้ำหนัก: