ToolHub
เปิดเครื่องมือ

เครื่องคำนวณความจำเพาะ CSS

คำนวณและเปรียบเทียบคะแนนความจำเพาะของ CSS selector พร้อมการแยกองค์ประกอบแบบภาพ

เครื่องมือสำหรับนักพัฒนา
เปิดเครื่องมือ เครื่องมือทั้งหมด

เกี่ยวกับเครื่องมือนี้

เครื่องคำนวณความจำเพาะ CSS ช่วยให้คุณป้อน CSS selector ใดๆ และดูคะแนนความจำเพาะได้ทันที โดยแยกเป็น 3 มิติ: ID, class และ element รองรับการเปรียบเทียบ selector สองตัวแบบเคียงข้างกัน ตรวจจับผู้ชนะโดยอัตโนมัติ พร้อมตัวอย่าง selector ทั่วไปและเอกสารอ้างอิงกฎความจำเพาะ

คุณสมบัติหลัก

ดูตัวอย่าง

สถานการณ์การใช้งาน

css specificity selector

คำถามที่พบบ่อย

ความจำเพาะ CSS คืออะไร?

ความจำเพาะ CSS เป็นระบบการให้คะแนนที่กำหนดว่ากฎ CSS ใดจะมีผลเมื่อมีหลาย selector ชี้ไปที่องค์ประกอบเดียวกัน โดยคำนวณน้ำหนักตามประเภทของ selector: ID selector มีน้ำหนักสูงสุด รองลงมาคือ class และ attribute selector และสุดท้ายคือ element selector

คำนวณความจำเพาะอย่างไร?

ความจำเพาะคำนวณเป็นคะแนนสามส่วน (ID, class, element) แต่ละ ID selector เพิ่ม 1 ในคอลัมน์ ID แต่ละ class, attribute หรือ pseudo-class selector เพิ่ม 1 ในคอลัมน์ class และแต่ละ element หรือ pseudo-element selector เพิ่ม 1 ในคอลัมน์ element

!important เขียนทับความจำเพาะหรือไม่?

ใช่ การประกาศ !important จะเขียนทับการคำนวณความจำเพาะปกติทั้งหมด เมื่อมีกฎ !important หลายกฎขัดแย้งกัน กฎที่มีความจำเพาะสูงกว่าจะมีผล Inline style ก็เขียนทับความจำเพาะแบบ selector ทั้งหมดเช่นกัน

สามารถเปรียบเทียบ selector สองตัวแบบเคียงข้างกันได้หรือไม่?

ได้ เครื่องมือนี้มีแผงเปรียบเทียบแบบเคียงข้างกัน คุณสามารถป้อน selector สองตัวและดูทันทีว่าตัวใดมีความจำเพาะสูงกว่า selector ที่มีคะแนนสูงกว่าจะมีเครื่องหมายผู้ชนะแสดงโดยอัตโนมัติ

เครื่องคำนวณรองรับ selector ประเภทใดบ้าง?

เครื่องคำนวณรองรับ ID selector, class selector, attribute selector, pseudo-class selector (เช่น :hover และ :nth-child), element selector และ pseudo-element selector (เช่น ::before และ ::after) นอกจากนี้ยังมีตัวอย่างทั่วไปที่คลิกเพื่อเติมได้

เครื่องมือที่เกี่ยวข้อง

JSON ตัวตรวจสอบตัวเลือกสีตัวสร้างแฮชUUID ตัวสร้าง