คำอธิบายโดยละเอียดเกี่ยวกับระดับและรายละเอียดของกฎลำดับความสำคัญของ CSS

คำอธิบายโดยละเอียดของการออกเสียงลำดับความสำคัญของ CSS ลำดับความสำคัญของ CSS ประกอบด้วยสี่ระดับ (ตัวเลือกในข้อความ ตัวเลือก ID ตัวเลือกคลาส ตัวเลือกองค์ประกอบ) และจำนวนครั้งที่เกิดขึ้นในแต่ละระดับ ลำดับความสำคัญของ CSS จะคำนวณตามจำนวนครั้งที่เกิดขึ้นในสี่ระดับนี้

ลำดับความสำคัญในการอ่านควรแบ่งออกเป็น "กลุ่ม" แต่ละกลุ่มมีความเป็นอิสระจากกันและเปรียบเทียบจากซ้ายไปขวา ปรากฏเป็นกลุ่มโดยคั่นด้วยเครื่องหมายจุลภาค
ตัวเลือก ( a , b , c , d )
เปรียบเทียบ: ↑ , ↑ , ↑ , ↑
ตัวเลือก ( a , b , c , d )
ดังที่แสดงในข้อความต้นฉบับใน w3c.org แบ่งออกเป็นสี่กลุ่ม a, b, c และ d ซึ่งทั้งหมดเป็นจำนวนเต็มบวก ค่าเริ่มต้นคือ 0 ซึ่งสอดคล้องกับโครงสร้างตัวเลือกและรูปแบบองค์ประกอบที่แตกต่างกัน เมื่อเปรียบเทียบลำดับความสำคัญระหว่างตัวเลือก ให้เปรียบเทียบหนึ่งต่อหนึ่งจากซ้ายไปขวา เมื่อการเปรียบเทียบมีค่ามากกว่า การเปรียบเทียบก็สามารถหยุดได้
li.red.level {} /* a=0 b=0 c=2 d=1 -> ความจำเพาะ = 0 , 0 , 2 , 1 */
/*เปรียบเทียบ ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> ความจำเพาะ = 0 , 0 , 1 , 1 */
/*เปรียบเทียบ ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> ความจำเพาะ = 0 , 0 , 1 , 3 */
/*เปรียบเทียบ ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> ความจำเพาะ = 0 , 1 , 0 , 0 */
/*เปรียบเทียบ ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 */

(ในตารางด้านบน ↑ หมายความว่ายังจำเป็นต้องมีการเปรียบเทียบ และ √ หมายความว่า ผลลัพธ์ได้จากที่นี่)
นอกจากนี้ ตราบใดที่เขียนอย่างถูกต้อง โครงสร้างของตัวเลือกสามารถทราบคร่าวๆ จากลำดับความสำคัญเท่านั้น เช่น:
1,0,0,0 หมายถึงสไตล์ภายในองค์ประกอบ
0,2,1,1 แสดงถึงตัวเลือกที่ประกอบด้วยตัวเลือก ID สองตัว ตัวเลือกคลาสหรือคลาสหลอกหรือแอตทริบิวต์ และตัวเลือกองค์ประกอบ
รายละเอียดของกฎลำดับความสำคัญของ CSS:
หลังจากแก้ไขการออกเสียงแล้ว เราสามารถเริ่มพูดถึงกฎโดยละเอียดได้:
ค่าของกลุ่ม a จะเป็น 1 เท่านั้นเมื่อ CSS ถูกเขียนลงในแอตทริบิวต์ style มิฉะนั้นจะเป็น 0 คำสั่งสไตล์ที่เขียนลงในสไตล์ไม่ใช่ตัวเลือกจริงๆ ดังนั้นค่าของกลุ่ม b, c และ d ที่นี่ เป็น 0 ทั้งหมด และเฉพาะค่าจริงเท่านั้น ตัวเลือกเท่านั้นที่จะมีค่ากลุ่ม b, c, d
ค่ากลุ่ม b ถูกกำหนดโดยตัวเลือก ID #ID จำนวนตัวเลือก ID ที่มีอยู่ และค่ากลุ่มจะถูกสะสม
กลุ่มค่า c ถูกกำหนดโดยคลาส คลาสหลอก และตัวเลือกแอตทริบิวต์ และกลุ่มของค่าจะถูกสะสม
กลุ่มค่า d ถูกกำหนดโดยชื่อองค์ประกอบนั่นคือตัวเลือกองค์ประกอบและกลุ่มของค่าจะถูกสะสม
โปรดทราบว่าค่าทั้งสี่ชุดนี้สอดคล้องกับตัวเลือกประเภทต่างๆ และไม่มีผลกระทบต่อกัน ซึ่งจะถูกเปรียบเทียบตามกฎการอ่าน
!สิ่งสำคัญ หลักการความใกล้ชิดและการสืบทอดไม่ได้กล่าวถึงที่นี่ และไม่มีโค้ดตัวอย่าง ยินดีต้อนรับทุกคนมาที่ webjx.com เพื่อหารือเกี่ยวกับ!
ต่อไปนี้คือตัวอย่างบางส่วน: ปัญหาเกี่ยวกับลำดับความสำคัญของ CSS ลำดับความสำคัญของ CSS ประกอบด้วยสี่ระดับ (ตัวเลือกข้อความ ตัวเลือกรหัส ตัวเลือกคลาส ตัวเลือกองค์ประกอบ) และจำนวนครั้งที่เกิดขึ้นในแต่ละระดับ ลำดับความสำคัญของ CSS จะคำนวณตามจำนวนครั้งที่เกิดขึ้นในสี่ระดับนี้
กฎการคำนวณสำหรับลำดับความสำคัญของ CSS มีดังนี้:
* รูปแบบที่กำหนดในหน้า เพิ่ม 1,0,0,0
* สำหรับตัวเลือก ID แต่ละตัว (เช่น #id) ให้เพิ่ม 0,1,0,0
* เพิ่ม 0,0,1,0 ให้กับตัวเลือกคลาสแต่ละตัว (เช่น .class), ตัวเลือกแอตทริบิวต์แต่ละตัว (เช่น [attribute=]) และแต่ละคลาสหลอก (เช่น: โฮเวอร์)
* สำหรับแต่ละตัวเลือกองค์ประกอบ (เช่น p) หรือตัวเลือกองค์ประกอบหลอก (เช่น: ลูกคนแรก) ให้เพิ่ม 0,0,0,1
จากนั้น เพิ่มตัวเลขสี่ตัวนี้แยกกันเพื่อรับค่าของลำดับความสำคัญที่กำหนดโดย CSS แต่ละรายการ
จากนั้นเปรียบเทียบขนาดทีละนิดจากซ้ายไปขวา สไตล์ CSS ที่มีจำนวนมากกว่าจะมีลำดับความสำคัญสูงกว่า