คำตอบนี้สำหรับผู้เริ่มต้นอย่างแท้จริง หากคุณต้องการภาพรวมของคำตอบนี้โปรดอ่านคำตอบที่สองของฉัน
Cascading เป็นกระบวนการรวมสไตล์ชีตที่แตกต่างกันและแก้ไขความขัดแย้งระหว่างกฎ CSS และการประกาศที่แตกต่างกันเมื่อมีกฎมากกว่าหนึ่งกฎใช้กับองค์ประกอบบางอย่างที่แตกต่างกันและการประกาศเมื่อมากกว่าหนึ่งกฎนำไปใช้เป็นองค์ประกอบบางอย่าง เนื่องจากอย่างที่คุณทราบกันดีอยู่แล้วว่าการประกาศคุณสมบัติของสไตล์บางอย่างเช่นขนาดฟอนต์สามารถปรากฏในหลายสไตล์ชีตและหลาย ๆ ครั้งในสไตล์ชีทเดียว
เพื่อให้เข้าใจการเรียงซ้อนคุณต้องเริ่มต้นด้วยเฟสการแยกวิเคราะห์ CSS เนื่องจากในขั้นตอนการแยกวิเคราะห์ขั้นตอนแรกคือการแก้ไขการประกาศ CSS ที่ขัดแย้งกันและขั้นตอนที่สองคือการประมวลผลค่า CSS สุดท้าย
ตอนนี้ CSS ยังสามารถมาจากแหล่งต่างๆ สิ่งที่พบบ่อยที่สุดคือ CSS ที่เรานักพัฒนาเขียนขึ้น การประกาศเหล่านี้ที่เราใส่ไว้ในสไตล์ชีตเรียกว่าการประกาศผู้แต่ง แหล่งอื่นอาจเป็นการประกาศผู้ใช้ซึ่ง CSS มาจากผู้ใช้ ตัวอย่างเช่นเมื่อผู้ใช้เปลี่ยนขนาดฟอนต์เริ่มต้นในเบราว์เซอร์นั่นคือ CSS ของผู้ใช้และสุดท้าย แต่ไม่ท้ายสุดจะมีการประกาศเบราว์เซอร์เริ่มต้น
ตัวอย่างเช่นหากเราใส่แท็กจุดยึดใน HTML ของเราสำหรับลิงก์แล้วไม่จัดรูปแบบเลยโดยปกติจะแสดงผลด้วยข้อความสีน้ำเงินและขีดเส้นใต้ด้านขวา ซึ่งเรียกว่า User agent CSS เนื่องจากเบราว์เซอร์กำหนด ดังนั้น cascade จึงรวมการประกาศ CSS ที่มาจากแหล่งที่มาที่แตกต่างกันเหล่านี้ทั้งหมด แต่ cascade จะแก้ไขความขัดแย้งได้อย่างไรเมื่อใช้กฎมากกว่าหนึ่งกฎ
สิ่งที่ต้องทำคือการดูความสำคัญที่ความจำเพาะของตัวเลือกและลำดับแหล่งที่มาของการประกาศที่ขัดแย้งกันเพื่อกำหนดว่าอันไหนมีความสำคัญเหนือกว่าและนี่คือวิธีการทำงาน อันดับแรกจากการเรียงซ้อนเริ่มต้นด้วยการให้การประกาศที่ขัดแย้งกันของความสำคัญที่แตกต่างกันโดยพิจารณาจากตำแหน่งที่ประกาศบนแหล่งที่มา การประกาศที่สำคัญที่สุดคือการประกาศของผู้ใช้ที่มีคีย์เวิร์ดสำคัญ
การประกาศที่สำคัญที่สุดอันดับสองคือการประกาศของผู้แต่งที่มีความสำคัญ ประการที่สามการประกาศผู้เขียนตามปกติจากนั้นการประกาศผู้ใช้ตามปกติและในที่สุดสิ่งที่สำคัญน้อยที่สุดคือการประกาศเบราว์เซอร์เริ่มต้นซึ่งจริง ๆ แล้วมันสมเหตุสมผลมากที่เราสามารถเขียนทับคำประกาศเหล่านี้ที่มาจากเบราว์เซอร์ได้
หลายครั้งเราจะมีกฎที่ขัดแย้งกันมากมายในสไตล์ชีตผู้เขียนของเราโดยไม่มีคำหลักที่สำคัญ นั่นเป็นสถานการณ์ที่พบบ่อยที่สุดและในกรณีนี้การประกาศทั้งหมดมีความสำคัญเหมือนกัน ทีนี้จะเกิดอะไรขึ้นในกรณีนี้? สิ่งที่น้ำตกทำถ้าเป็นกรณีนี้คือการคำนวณและเปรียบเทียบความจำเพาะของตัวเลือกการประกาศและนี่คือวิธีการทำงาน
รูปแบบอินไลน์มีความเฉพาะเจาะจงสูงสุดตามด้วย ID จากนั้นคลาสหลอกคลาสและตัวเลือกแอตทริบิวต์และสุดท้ายคือองค์ประกอบที่เจาะจงน้อยที่สุดและตัวเลือกองค์ประกอบหลอก ดังนั้นเมื่อเรามีการประกาศที่ขัดแย้งกันซึ่งมีความสำคัญเช่นเดียวกับที่เราเห็นในสไลด์สุดท้ายเราจะคำนวณความจำเพาะของตัวเลือกตามลำดับความสำคัญที่ฉันเพิ่งแสดงให้คุณเห็น แต่มาดูกันว่าเราคำนวณความเฉพาะเจาะจงอย่างไรด้วยตัวอย่างเล็ก ๆ นั่นคือสิ่งที่ดีที่สุดเสมอใช่
จากตัวอย่างข้างต้นการประกาศทั้งหมดนี้มีความสำคัญเหมือนกันเนื่องจากเป็นการประกาศของผู้แต่งทั้งหมด ลองคำนวณความเฉพาะเจาะจงของตัวเลือกเพื่อดูว่าสีพื้นหลังจะเป็นสีฟ้าสีเขียวสีม่วงหรือสีเหลืองและนี่คือวิธีที่เราทำ ความเฉพาะเจาะจงไม่ได้เป็นเพียงตัวเลขเดียว แต่เป็นตัวเลขหนึ่งสำหรับแต่ละประเภทจากสี่ประเภทที่ฉันแสดงให้คุณเห็นก่อน รูปแบบอินไลน์ ID คลาสองค์ประกอบหลอกและแอตทริบิวต์และสุดท้ายองค์ประกอบและสำหรับแต่ละสิ่งเหล่านี้เรานับจำนวนครั้งที่เกิดขึ้นในตัวเลือก
ดังนั้นที่นี่ในตัวเลือกหนึ่งเราไม่มีสไตล์อินไลน์แน่นอนเพราะต้องเขียนสไตล์อินไลน์ใน HTML ซึ่งไม่ใช่กรณีนี้ดังนั้นจึงเป็นศูนย์ เรายังไม่มีรหัสที่นี่ดังนั้นจึงเป็นศูนย์อีกครั้ง แต่เรามีคลาสเดียวคือคลาสปุ่ม ดังนั้นสำหรับหมวดหมู่คลาสเรามีหนึ่งและในที่สุดก็ไม่มีตัวเลือกองค์ประกอบที่นี่จึงเป็นศูนย์สำหรับหมวดนั้นเช่นกัน ความจำเพาะของตัวเลือกคือศูนย์ศูนย์หนึ่งศูนย์
ตอนนี้เรามาเปรียบเทียบกับคนอื่น ๆ รูปแบบถัดไปไม่ใช่สไตล์อินไลน์ดังนั้นจึงเป็นศูนย์สำหรับรูปแบบแรก ตอนนี้เรามีตัวเลือก ID สำหรับ nav ID แล้วใช่เลยซึ่งเป็นตัวเลือกสำหรับ ID นอกจากนี้เรายังมีสองคลาสที่ดึงไปทางขวาและปุ่มดังนั้นมันจึงเป็นสองคลาสสำหรับหมวดหมู่คลาสและในที่สุดก็มีตัวเลือกองค์ประกอบสองตัวที่นี่ องค์ประกอบ nav และองค์ประกอบ div ซึ่งหมายความว่าเป็นสององค์ประกอบสำหรับหมวดหมู่องค์ประกอบ ในที่สุดความจำเพาะของตัวเลือกก็คือศูนย์หนึ่งสองสองซึ่งจริงๆแล้วเป็นตัวเลือกที่เฉพาะเจาะจงมาก
ตัวเลือกหมายเลขสามนั้นง่ายมาก มันเป็นเพียงตัวเลือกองค์ประกอบดังนั้นความจำเพาะจึงเป็นศูนย์ศูนย์ศูนย์หนึ่ง
ตอนนี้คนสุดท้ายเลือกหมายเลขสี่ ก่อนอื่นเรามี nav ID ดังนั้นจึงเป็นรหัสสำหรับ ID ต่อไปเรามีคลาสคลาสปุ่มและคลาสหลอกซึ่งโฮเวอร์ซึ่งทำให้เป็นสองคลาสสำหรับคลาสทั้งหมด เนื่องจากยังมีตัวเลือกองค์ประกอบหนึ่งความจำเพาะสุดท้ายคือศูนย์หนึ่งสองหนึ่ง
ทีนี้มารู้กันว่าเราจะใช้ตัวเลขเหล่านี้อย่างไรเพื่อค้นหาว่าตัวเลือกใดใช้ เราเริ่มดูตัวเลขจากซ้ายไปขวาโดยเริ่มจากหมวดหมู่ที่เฉพาะเจาะจงที่สุดคือสไตล์อินไลน์ หากมีตัวเลือกหนึ่งสำหรับสไตล์อินไลน์จะชนะตัวเลือกอื่น ๆ ทั้งหมดเนื่องจากเป็นหมวดหมู่ที่เฉพาะเจาะจงที่สุด นี่ไม่ใช่กรณีนี้ดังนั้นเรามาดู ID กันดีกว่า เราเห็นว่าตัวเลือกสองและสี่มีหนึ่งที่นี่ในขณะที่ตัวเลือกอื่นมีศูนย์ดังนั้นตัวเลือกที่มีศูนย์จึงไม่อยู่ในเกมเนื่องจากมีความเฉพาะเจาะจงน้อยกว่าจากนั้นเลือกสองและสี่ตัวที่มี ID
ตอนนี้เนื่องจากตัวเลือกทั้งสองมีหนึ่งในหมวดหมู่ ID เราจึงต้องดำเนินการต่อและตรวจสอบคลาส พวกเขาทั้งสองมีสองในหมวดหมู่นี้ยังคงเสมอกันและสุดท้ายในหมวดองค์ประกอบตัวเลือกสองมีสองในขณะที่ตัวเลือกสี่มีเพียงหนึ่งเดียวและเราจึงมีผู้ชนะที่นี่ ตัวเลือกหมายเลขสองเป็นตัวเลือกที่เฉพาะเจาะจงที่สุดของทั้งหมดและจะทำให้ปุ่มของเรามีพื้นหลังสีเขียว 34 ค่าของการประกาศที่ชนะเรียกว่าค่าเรียงซ้อนเนื่องจากเป็นผลลัพธ์ของการเรียงซ้อน
ดังนั้นเราจึงเริ่มต้นด้วยค่าที่ประกาศไว้มากมายในกรณีนี้คือสีน้ำเงินสีเขียวสีม่วงและสีเหลืองหนึ่งในนั้นชนะและกลายเป็นค่าเรียงซ้อนซึ่งอยู่ในตัวอย่างของเราสีเขียว
ตอนนี้ลองนึกภาพภาคสี่มีสององค์ประกอบจากนั้นตัวเลือกทั้งสองและสี่จะมีความจำเพาะเหมือนกันใช่ไหม จะเกิดอะไรขึ้นในกรณีนี้และฉันสัญญาว่าตอนนี้เกือบจะจบแล้ว ถ้า ณ จุดนี้ยังคงมีความสัมพันธ์กันการประกาศ CSS สุดท้ายที่เขียนในโค้ดคือสิ่งที่จะนำไปใช้ ดังนั้นอีกครั้งหากทุกอย่างเท่ากันหากตัวเลือกการประกาศทั้งหมดมีความจำเพาะเหมือนกันนั่นเป็นเพียงการประกาศสุดท้ายที่จะใช้เพื่อจัดรูปแบบองค์ประกอบที่เลือก