ปัญหาลำดับความสำคัญคือปัญหาการแก้ไขข้อขัดแย้งจริงๆ เมื่อตัวเลือก 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 ดังนั้นจึงสูงกว่าคำจำกัดความภายนอกเสมอ ในที่นี้ สไตล์ในข้อความหมายถึงสไตล์ที่มีลักษณะเช่น