ปัญหาลำดับความสำคัญคือปัญหาการแก้ไขข้อขัดแย้งจริงๆ เมื่อตัวเลือก CSS เลือกองค์ประกอบเดียวกัน (หรือเนื้อหา) จะต้องเลือกกฎ CSS ที่แตกต่างกันตามลำดับความสำคัญ จริงๆ แล้วมีปัญหามากมายที่เกี่ยวข้อง
ประการแรกคือความเฉพาะเจาะจงของกฎ CSS CSS2.1 มีชุดวิธีการคำนวณสำหรับความเฉพาะเจาะจงซึ่งแสดงด้วยสตริงตัวเลขสี่หลัก (CSS2 คือตัวเลขสามหลัก) ในท้ายที่สุดยิ่งความจำเพาะสูงเท่าไรก็ยิ่งมากขึ้นเท่านั้น กฎพิเศษในลำดับความสำคัญ มันจะได้เปรียบมากขึ้นเมื่อทำการตัดสิน เกี่ยวกับการคำนวณความจำเพาะเฉพาะ มีกฎทั่วไปต่อไปนี้สำหรับการบวกตัวเลขในสถานการณ์ต่างๆ:
สำหรับตัวเลือก ID แต่ละตัว (#someid) ให้เพิ่ม 0,1,0,0
ตัวเลือกคลาสแต่ละตัว (.someclass) ตัวเลือกแอตทริบิวต์แต่ละตัว (รูปแบบเช่น [attr=""] ฯลฯ ) แต่ละคลาสหลอก (รูปแบบเช่น: โฮเวอร์ ฯลฯ ) จะเพิ่ม 0, 0, 1, 0
ให้กับแต่ละองค์ประกอบหรือ องค์ประกอบหลอก (:firstchild) ฯลฯ เพิ่ม 0,0,0,1
ตัวเลือกอื่นๆ ได้แก่ global selector * เพิ่ม 0,0,0,0 มันเทียบเท่ากับการไม่เพิ่ม แต่นี่ก็เป็นความจำเพาะเช่นกันซึ่งจะอธิบายในภายหลัง
ตามกฎเหล่านี้ สตริงตัวเลขจะถูกเพิ่มทีละนิดเพื่อให้ได้ความจำเพาะที่คำนวณได้ในขั้นสุดท้าย จากนั้นจึงเปรียบเทียบทีละนิดตามลำดับจากซ้ายไปขวาเมื่อทำการเปรียบเทียบและเลือก
เรามายกตัวอย่างกัน:
h1 {สี: แดง;}
/* มีโบนัสธาตุธรรมดาเพียงอันเดียว ผลลัพธ์คือ 0,0,0,1 */
ร่างกาย h1 {สี: เขียว;}
/* เพิ่มองค์ประกอบธรรมดา 2 ตัว ผลลัพธ์คือ 0,0,0,2 */
--ฝ่ายหลังชนะ
h2.grape {สี: สีม่วง;}
/* มีการเพิ่มองค์ประกอบธรรมดาและตัวเลือกคลาส และผลลัพธ์คือ 0,0,1,1*/
h2 {สี: เงิน;}
/*องค์ประกอบธรรมดา ผลลัพธ์คือ 0,0,0,1 */
--แบบเดิมชนะ
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* องค์ประกอบธรรมดา 7 รายการ ตัวเลือกแอตทริบิวต์หนึ่งรายการ และตัวเลือกอื่นอีกสองรายการ ผลลัพธ์คือ 0,0,1,7 */
li#answer {สี: น้ำเงิน;}
/* ตัวเลือก ID ตัวเลือกปกติ ผลลัพธ์คือ 0,1,0,1 */
--ฝ่ายหลังชนะ
นอกจากความเฉพาะเจาะจงแล้ว ยังมี
สไตล์สไตล์อื่นๆ ภายในข้อความกฎที่มีลำดับความสำคัญ 1,0,0,0 ดังนั้นจึงสูงกว่าคำจำกัดความภายนอกเสมอ ในที่นี้ สไตล์ในข้อความหมายถึงสไตล์ที่มีลักษณะเช่น <div style="color: red">blah</div> ในขณะที่คำจำกัดความภายนอกหมายถึงกฎที่กำหนดผ่านแท็ก <link> หรือ <style>
มีกฎการประกาศที่สำคัญเหนือสิ่งอื่นใด
ถ้า !important declarations ขัดแย้งกัน ระบบจะเปรียบเทียบลำดับความสำคัญ
หากลำดับความสำคัญเหมือนกัน ลำดับความสำคัญจะถูกกำหนดตามลำดับที่ปรากฏในซอร์สโค้ด โดยลำดับความสำคัญในภายหลัง
สไตล์ที่ได้รับจากการสืบทอดไม่มีการคำนวณความจำเพาะ ซึ่งต่ำกว่ากฎอื่นๆ ทั้งหมด (เช่น ที่กำหนดโดยตัวเลือกร่วม *)
เกี่ยวกับสไตล์ภายนอกที่โหลดผ่าน @import เนื่องจาก @import จะต้องปรากฏก่อนคำจำกัดความกฎอื่นๆ ทั้งหมด (หากไม่เป็นเช่นนั้น เบราว์เซอร์ไม่ควรเพิกเฉย) ดังนั้น ตามหลักการมาก่อนได้ก่อน โดยทั่วไปความขัดแย้งในลำดับความสำคัญจะมีผลเหนือกว่า
ฉันต้องพูดถึงที่นี่ว่า IE สามารถจดจำ @import ในตำแหน่งที่ไม่ถูกต้อง แต่ไม่ว่า @import จะอยู่ที่ใด IE จะถือว่าอยู่ก่อนคำจำกัดความของกฎอื่นๆ ทั้งหมด ซึ่งอาจทำให้เกิดความเข้าใจผิดบางประการได้
ดังนั้น แม้ว่าปัญหาสำคัญจะดูเหมือนง่าย แต่ก็ยังมีกลไกที่ค่อนข้างซับซ้อนอยู่เบื้องหลัง ซึ่งต้องได้รับการดูแลเอาใจใส่มากขึ้น