น้ำตกเป็นสิ่งที่ทำให้สไตล์ชีท CSS เป็นประโยชน์ ในระยะสั้นน้ำตกจะกำหนดลำดับความสำคัญสำหรับวิธีที่จะใช้รูปแบบที่ขัดแย้งกัน กล่าวอีกนัยหนึ่งถ้าคุณมีสองรูปแบบ:
p (สี: แดง; }p (สี: ฟ้า; }
น้ำตกจะกำหนดสีที่ย่อหน้าควรเป็นแม้ว่าแบบชีตจะระบุว่าควรเป็นสีแดงและสีน้ำเงิน ในที่สุดสีเดียวสามารถใช้กับย่อหน้าได้ดังนั้นจึงต้องมีคำสั่งซื้อ และคำสั่งนี้ถูกใช้โดย selectors (the พี
ในตัวอย่างข้างต้น) มีลำดับความสำคัญสูงสุดและลำดับใดที่ปรากฏในเอกสาร
รายการต่อไปนี้เป็นการลดความซับซ้อนของวิธีการที่เบราว์เซอร์กำหนดลำดับความสำคัญของสไตล์:
- ดูในสไตล์ชีตสำหรับตัวเลือกที่ตรงกับองค์ประกอบ หากไม่มีรูปแบบที่กำหนดไว้ให้ใช้กฎเริ่มต้นในเบราเซอร์
- ดูในสไตล์ชีตสำหรับ selectors ที่ทำเครื่องหมายไว้
!สำคัญ
และใช้กับองค์ประกอบที่เหมาะสม - สไตล์ทั้งหมดในสไตล์ชีตจะแทนที่รูปแบบเบราเซอร์เริ่มต้น (ยกเว้นในกรณีของสไตล์ชีตของผู้ใช้)
- ตัวเลือกสไตล์ที่เจาะจงมากขึ้นจะมีความสำคัญมากกว่า ตัวอย่างเช่น,
div> p.class
มีความจำเพาะมากกว่าp.class
ซึ่งมีความจำเพาะมากกว่าพี
. - สุดท้ายหากกฎสองข้อใช้กับองค์ประกอบเดียวกันและมีลำดับความสำคัญของตัวเลือกเดียวกันตัวที่โหลด สุดท้าย จะถูกนำมาใช้ กล่าวอีกนัยหนึ่งสไตล์ชีตจะอ่านจากบนลงล่างและใช้สไตล์กับส่วนอื่น ๆ
ขึ้นอยู่กับกฎเหล่านั้นในตัวอย่างข้างต้นย่อหน้าจะเขียนด้วยสีฟ้าเพราะ p (สี: ฟ้า; }
มาพร้อมกับสไตล์ชีตล่าสุด
นี่เป็นคำอธิบายที่เรียบง่ายของน้ำตก หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของน้ำตกคุณควรอ่าน "Cascade" ใน Cascading Style Sheets?