ในบางครั้งที่เราใช้ CSS แล้วไม่ได้อย่างที่ตั้งใจ จะแก้ยังไงมันก็ยังไม่ยอมเป็นไปตามที่ตั้งใจ อาจจะเพราะการระบุ ค่า class หรือ selector ซ้ำกัน เช่น
<html>
<head><title>sample</title></head>
<body>
<style>
div{
background-color:black;
}
div{
background-color:yellow;
}
div{
background-color:green;
}
</style>
</body>
<div>Background Color</div>
</html>
จากโค๊ดเห็นว่า
1. Div แรก ระบุให้เป็นพื้นหลังสีดำ
2. Div ที่สอง ระบุให้เป็นพื้นหลังสีเหลือง
3. Div ที่สาม ระบุให้เป็นพื้นหลังสีเขียว
ลองดูผลลัพธ์กัน
จะสังเกตผลลัพธ์จะเป็นไปตาม Div ที่สาม
เนื่องจากระบบจะอ่านค่าจากบนลงล่าง และเอาค่าสุดท้ายที่เรียกมาใช้เป็นหลัก จึงทำให้ผลลัพธ์ออกมา เป็นดัง Div ที่สาม ที่เรียกพื้นหลังสีเขียว ดังภาพด้านบน
ด้วยเหตุนี้ ถ้าเกิดสร้าง css แล้วไม่ได้ดั่งใจ อาจจะเกิดจากการสร้างซ้ำไว้ที่ไหนที่หนึ่งก็ได้ครับ
จำนวนคนดู : 2,756 | วันที่สร้าง : 19/04/2021 |