เรียนรู้วิธีเลือกองค์ประกอบ HTML ทั้งหมดยกเว้นองค์ประกอบแรกด้วย CSS `:not(:first-child) ตัวเลือก
หากคุณเพิ่มชุดกฎต่อไปนี้ในสไตล์ชีต CSS ของคุณ องค์ประกอบ h2 ทุกรายการในเว็บไซต์ของคุณทั้งหมดจะได้รับระยะขอบบนสุด 64px
h2 {
margin-top: 64px;
}แต่ถ้าคุณไม่ต้องการให้ระยะขอบบนนั้นกับองค์ประกอบ h2 แรกในเว็บไซต์ของคุณโดยทั่วไป แต่องค์ประกอบ h2 อื่นๆ ทั้งหมดล่ะ
ใช้ตัวเลือก :not(:first-child)
เพิ่มชุดกฎต่อไปนี้ในสไตล์ชีตของคุณ:
h2:not(:first-child) {
margin-top: 64px;
}ตอนนี้ทุกองค์ประกอบ h2 บนเว็บไซต์ของคุณจะได้รับค่า margin-top เท่ากัน ยกเว้นองค์ประกอบ h2 แรกสุดในแต่ละเอกสาร (หน้า/โพสต์)
กรณีการใช้งานสำหรับตัวเลือก :not(:first-child)
สมมติว่าคุณกำลังจัดรูปแบบการจัดรูปแบบตัวพิมพ์ของเว็บไซต์ คุณเป็นผู้ตัดสินใจว่า h2 . บทความทั้งหมดของคุณ องค์ประกอบส่วนหัวควรมี margin-top: 64px; เพื่อให้มีห้องหายใจระหว่างส่วนต่างๆ
แต่ที่ด้านบนสุดของทุกบทความ คุณมีส่วนเกริ่นนำที่มีสไตล์นิตยสาร/โปสเตอร์พร้อมภาพหน้าปก โอเวอร์เลย์ และองค์ประกอบข้อความต่างๆ ที่ด้านบน ในกรณีนั้น คุณอาจใช้องค์ประกอบส่วนหัวหลายรายการ (h1 สำหรับชื่อเรื่อง h2 สำหรับสโลแกน ฯลฯ)
ในกรณีนั้น คุณอาจไม่ต้องการใช้ค่าการเว้นวรรคที่เหมือนกันทุกประการ (ระยะขอบ/ช่องว่างภายใน) ในส่วนแนะนำของคุณ เช่นเดียวกับในบทความของคุณ โดยใช้ :not(:first-child) ตัวเลือก คุณลบปัญหานั้นออก
คุณสามารถใช้ตัวเลือกนี้กับทุกองค์ประกอบ HTML กรณีการใช้งานทั่วไปอีกกรณีหนึ่งคือถ้าคุณใช้รายการที่ไม่เรียงลำดับ <ul> สำหรับเมนูของคุณ คุณอาจมีรูปแบบเฉพาะเจาะจงที่คุณต้องการเพิ่มลงใน ul ในเมนูของคุณ แต่ไม่ใช่ในส่วนที่เหลือของไซต์ของคุณ (การจัดตำแหน่ง เส้นขอบ สี ฯลฯ)
ตอนนี้ CSS เกี่ยวกับการจัดสไตล์ด้วยคลาสไม่ใช่หรือ
ในการพัฒนาเว็บสมัยใหม่ การหลีกเลี่ยงตัวเลือกองค์ประกอบการจัดสไตล์โดยตรงเป็นที่นิยม ส่วนใหญ่ใช้ คลาส ตอนนี้. ฉันเป็นแฟนตัวยงของชั้นเรียนเช่นกัน เพราะมันช่วยให้เขียน CSS ที่ปรับขนาดและนำกลับมาใช้ใหม่ได้บนแพลตฟอร์มเว็บที่กำลังเติบโต
อย่างไรก็ตาม การจัดรูปแบบตัวเลือกโดยตรงยังคงมีอยู่ ในทางปฏิบัติ การสร้างสไตล์พื้นฐาน/โดยรวมบนตัวเลือกองค์ประกอบโดยตรงเพื่อปลูกฝังความสม่ำเสมอและความสม่ำเสมอใน UI ผลิตภัณฑ์ของคุณโดยอัตโนมัติ วิธีนี้ช่วยให้คุณประหยัดการจัดรูปแบบ UI ซ้ำๆ ได้มาก — เมื่อทำถูกต้อง
