การระบุการใช้งาน css ค่าใดค่าหนึ่ง อย่างเฉพาะเจาะจง (specificity)

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css

ดูแล้ว 9,103 ครั้ง


css กับการระบุการใช้งานอย่างเฉพาะเจาะจง (specificity)
กรณี่ที่มีการใช้ CSS ขัดแย้งกัน 2 ส่วนหรือมากกว่านั้น จะมีกฏพื้นฐานของ CSS ที่มีไว้กำหนดว่าจะเลือกใช้ค่า CSS ใด


ตัวอย่าง กรณีที่ 1
ถ้าตัว selectors เป็นตัวเดียวกัน ค่า CSS ตัวล่าสุดหรือตัวหลังสุด จะถูกนำไปใช้ เช่น

<style type="text/css">
p{ color:#000000;}
p{ color:#FF0000; }
</style>
จากค่า CSS ด้านบน จะพบว่าค่าสีของ p จะเป็นสีแดง

ตัวอย่าง กรณีที่ 2
ถ้าตัว selectors ของ css ใดมีค่า specificiry มากกว่า ค่าของ css นั้นจะถูกนำไปใช้ เช่น

<style type="text/css">
div p{ color:#000000;}
p{ color:#FF0000; }
</style>


จากค่า CSS ด้านบน จะพบว่าค่าสีของ p จะเป็นสีดำ ทั้งนี้เพราะค่า specificity ของ selectors มีค่ามากกว่า
ซึ่งค่า specificity สามารถคำนวณได้จากค่าดังต่อไปนี้
1.ทุกๆ html selector แต่ละตัวจะมีค่าเท่ากับ 1 เช่น p span ..เป็นต้น
2.ทุกๆ class selector แต่ละตัวจะมีค่าเท่ากับ 10 เข่น .mycss1 เป็นต้น
3.ทุกๆ id selector แต่ละตัวจะมีค่าเท่ากับ 100 เข่น #myid เป็นต้น


ตัวอย่างและการคำนวณ
- p มีค่า specificity เท่ากับ 1 (เพราะมี html selector 1 ตัว)
- div p มีค่า specificity เท่ากับ 2 (เพราะมี html selector 2 ตัว)
- .myclass มีค่า specificity เท่ากับ 10 (เพราะมี class selector 1 ตัว ก็เท่ากับ 1 x 10 =10)
- div p.myclass มีค่า specificity เท่ากับ 12 (เพราะมี html selector 2 ตัว และ class selector 1 ตัว เท่ากับ 1+1+10)
- #myid มีค่า specificity เท่ากับ 100 (เพราะมี id selector 1 ตัว ก็เท่ากับ 1 x 100 =100)
- body #content .alternative p มีค่า specificity เท่ากับ 112 (เพราะมี html selector 2 ตัว class selector 1 ตัว และ id selector 1 ตัว เท่ากับ 1+1+10+100 =112)

เมื่อ css ใดมีค่า specificity มากกว่า ก็จะเลือกใช้ค่า css นั้นๆ



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: css







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ