กรณีที่ใช้ selector ซ้ำ
เหตุเกิดจากใช้ selector ซ้ำ
ในบางครั้งที่เราใช้ 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 แล้วไม่ได้ดั่งใจ อาจจะเกิดจากการสร้างซ้ำไว้ที่ไหนที่หนึ่งก็ได้ครับ
| จำนวนคนดู : 3,482 | วันที่สร้าง : 19/04/2021 |
