เมื่อเร็ว ๆ นี้ฉันเห็นบล็อกที่มีคำอธิบายที่ดีกว่าเกี่ยวกับลำดับความสำคัญของ CSS แม้ว่าจะมีบทความที่เกี่ยวข้องบนอินเทอร์เน็ต แต่ฉันยังคงโพสต์ซ้ำเพื่อให้คุณใช้อ้างอิง
คำอธิบายโดยละเอียดของการออกเสียงลำดับความสำคัญของ CSS ลำดับความสำคัญของ CSS ประกอบด้วยสี่ระดับ (ตัวเลือกในข้อความ ตัวเลือก ID ตัวเลือกคลาส ตัวเลือกองค์ประกอบ) และจำนวนครั้งที่เกิดขึ้นในแต่ละระดับ ลำดับความสำคัญของ CSS จะคำนวณตามจำนวนครั้งที่เกิดขึ้นในสี่ระดับนี้
ต่อไปนี้เป็นคำพูด: [พิมพ์ซ้ำจากบล็อกของ GOVO]
ลำดับความสำคัญในการอ่านควรแบ่งออกเป็น "กลุ่ม" แต่ละกลุ่มมีความเป็นอิสระจากกันและเปรียบเทียบจากซ้ายไปขวา ปรากฏเป็นกลุ่มโดยคั่นด้วยเครื่องหมายจุลภาค
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] ตัวเลือก ( a , b , c , d )
เปรียบเทียบ: ↑ , ↑ , ↑ , ↑
ตัวเลือก ( a , b , c , d ) ดังที่แสดงในข้อความต้นฉบับใน w3c.org แบ่งออกเป็นสี่กลุ่ม a, b, c, d ทั้งหมดเป็นจำนวนเต็มบวก และค่าเริ่มต้นคือ 0 ซึ่งสอดคล้องกับตัวเลือกที่แตกต่างกัน โครงสร้างและองค์ประกอบต่างๆ ที่เกิดขึ้น เมื่อเปรียบเทียบลำดับความสำคัญระหว่างตัวเลือก ให้เปรียบเทียบหนึ่งต่อหนึ่งจากซ้ายไปขวา เมื่อการเปรียบเทียบมีค่ามากกว่า การเปรียบเทียบก็สามารถหยุดได้
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] 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 ถูกกำหนดโดยชื่อองค์ประกอบนั่นคือตัวเลือกองค์ประกอบและกลุ่มของค่าจะถูกสะสม
โปรดทราบว่าค่าทั้งสี่ชุดนี้สอดคล้องกับตัวเลือกประเภทต่างๆ และไม่มีผลกระทบต่อกัน ซึ่งจะถูกเปรียบเทียบตามกฎการอ่าน
!สิ่งสำคัญ หลักการความใกล้ชิดและการสืบทอดไม่ได้กล่าวถึงที่นี่ และไม่มีโค้ดตัวอย่าง ยินดีต้อนรับทุกคนมาที่ W3Cbbs.com เพื่อหารือเกี่ยวกับ!
ตัวอย่าง: ปัญหาลำดับความสำคัญของ CSS
ลำดับความสำคัญของ CSS ประกอบด้วยสี่ระดับ (ตัวเลือกข้อความ ตัวเลือก ID ตัวเลือกคลาส ตัวเลือกองค์ประกอบ) และจำนวนครั้งที่เกิดขึ้นในแต่ละระดับ ลำดับความสำคัญของ CSS จะคำนวณตามจำนวนครั้งที่เกิดขึ้นในสี่ระดับนี้
กฎการคำนวณสำหรับลำดับความสำคัญของ CSS มีดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] * รูปแบบที่กำหนดในหน้า เพิ่ม 1,0,0,0
* สำหรับตัวเลือก ID แต่ละตัว (เช่น #id) ให้เพิ่ม 0,1,0,0
* เพิ่ม 0,0,1,0 ให้กับตัวเลือกคลาสแต่ละตัว (เช่น .class), ตัวเลือกแอตทริบิวต์แต่ละตัว (เช่น [attribute=]) และแต่ละคลาสหลอก (เช่น :hover)
* สำหรับแต่ละตัวเลือกองค์ประกอบ (เช่น p) หรือตัวเลือกองค์ประกอบหลอก (เช่น :firstchild) ฯลฯ ให้เพิ่ม 0,0,0,1
จากนั้น เพิ่มตัวเลขสี่ตัวนี้แยกกันเพื่อรับค่าของลำดับความสำคัญที่กำหนดโดย CSS แต่ละรายการ
จากนั้นเปรียบเทียบขนาดทีละนิดจากซ้ายไปขวา สไตล์ CSS ที่มีจำนวนมากกว่าจะมีลำดับความสำคัญสูงกว่า
ตัวอย่าง:
css หรือ <style> กำหนดไว้ดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] 1.h1 {สี: แดง;}
/* ตัวเลือกองค์ประกอบ ผลลัพธ์คือ 0,0,0,1 */
2. ตัว h1 {สี: เขียว;}
/* ตัวเลือกองค์ประกอบสองตัว ผลลัพธ์คือ 0,0,0,2 */
3. h2.grape {สี: สีม่วง;}
/* ตัวเลือกองค์ประกอบและตัวเลือกคลาส ผลลัพธ์คือ 0,0,1,1*/
4. li#answer {สี: น้ำเงิน;}
/* ตัวเลือกองค์ประกอบ ตัวเลือก ID ผลลัพธ์คือ 0,1,0,1 */
แอตทริบิวต์สไตล์ขององค์ประกอบถูกกำหนดดังนี้:
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] h1 {สี: น้ำเงิน;}
/* กำหนดไว้ในเพจ ซึ่งเป็นตัวเลือกองค์ประกอบ ผลลัพธ์คือ 1,0,0,1*/
หมายเหตุ: ตัวเลขทั้งหมดซ้อนทับอยู่ที่นี่ (0,0,0,1)+(0,0,0,2)+(0,0,1,1)+(0,1,0, 1)+(1 ,0,0,1)=(1,1,1,6)
ตั้งแต่นั้นมา สีขององค์ประกอบ h1 จะเป็นสีน้ำเงิน
สังเกต:
1. สไตล์ที่ประกาศโดย !important มีลำดับความสำคัญสูงสุด หากมีข้อขัดแย้ง ระบบจะคำนวณอีกครั้ง
2. หากลำดับความสำคัญเท่ากัน ให้เลือกสไตล์ที่ปรากฏลำดับสุดท้าย
3. สไตล์ที่สืบทอดมามีลำดับความสำคัญต่ำสุด
