เรียนรู้ที่จะคาดเดาว่ากฎ CSS ใดจะชนะโดยใช้ความจำเพาะ และใช้ประโยชน์จากการสืบทอดเพื่อเขียนโค้ดให้น้อยลง
เปิดบทเรียนนี้ใน Kodokonคุณเขียนกฎขึ้นมาหนึ่งข้อ โหลดหน้าใหม่… แล้วก็ไม่มีอะไรเปลี่ยนแปลง โดยส่วนใหญ่ ตัวการไม่ใช่บั๊ก แต่คือ cascade เมื่อมีหลายกฎเล็งไปที่อีลิเมนต์เดียวกัน เบราว์เซอร์จะตัดสินเสมอตามลำดับนี้ ต้นทางของกฎ (สไตล์ของเบราว์เซอร์ ตามด้วยของคุณ) จากนั้นคือ ความจำเพาะ (specificity) ของ selector และสุดท้ายคือลำดับที่ปรากฏในโค้ด การเชี่ยวชาญกลไกนี้จะช่วยประหยัดเวลาแก้บั๊กของคุณได้หลายชั่วโมง
p {
color: gray;
}
.article p {
color: navy;
}ความจำเพาะถูกคำนวณเป็นคะแนนสามส่วน (ids, classes, elements) #menu ได้ 1-0-0, .nav-link ได้ 0-1-0, a ได้ 0-0-1 คุณเปรียบเทียบจากซ้ายไปขวา #menu (1-0-0) เอาชนะ .nav .link .active (0-3-0) ได้ แม้จะมีสามคลาสก็ตาม แบบฝึกหัดในใจ ระหว่าง header nav a (0-0-3) กับ .main-link (0-1-0) อันไหนชนะ คำตอบคือคลาส เพราะคลาสหนึ่งตัวมีน้ำหนักมากกว่าอีลิเมนต์จำนวนเท่าใดก็ตาม
header nav a {
color: steelblue;
}
.main-link {
color: crimson;
}การสืบทอด (inheritance) เป็นพันธมิตรของคุณในการเขียนโค้ดให้น้อยลง คุณสมบัติที่เกี่ยวกับข้อความ (color, font-family, font-size, line-height) จะถูกส่งต่อไปยังลูกหลานโดยอัตโนมัติ ส่วนคุณสมบัติของกล่อง (margin, padding, border, width) จะไม่ถูกสืบทอด ซึ่งเป็นเรื่องดี ไม่เช่นนั้นลูกทุกตัวจะได้รับเส้นขอบของพ่อแม่ ดังนั้นให้กำหนดตัวอักษรของคุณเพียงครั้งเดียวที่ระดับสูงสุด
body {
font-family: "Inter", sans-serif;
color: #1f2937;
line-height: 1.6;
}#intro { color: red; } แล้วตามด้วย .text { color: blue; } สีใดถูกนำมาใช้