PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

14 February 2009 By
css

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



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 นั้นๆ







Tags:: css






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


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