ตามความเข้าใจของเราเกี่ยวกับลำดับความสำคัญของ CSS สไตล์ CSS ที่กำหนดไว้ล่าสุดจะแทนที่สไตล์ที่มีอยู่หรือที่ขัดแย้งกันทั้งหมดที่กำหนดไว้ก่อนหน้า เช่นตัวอย่างต่อไปนี้:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ตัวอย่างซอร์สโค้ด: p { สี: แดง; พื้นหลัง: เหลือง } |
ย่อหน้าด้านบนจะปรากฏเป็นแบบอักษรสีเขียวโดยมีพื้นหลังสีเหลือง เนื่องจากสีที่กำหนดล่าสุด: สีเขียวจะเขียนทับสีแดงที่กำหนดไว้ก่อนหน้านี้ ส่วนสาเหตุที่ทำให้พื้นหลังสีเหลืองไม่หายไปนั้นเป็นเพราะไม่มี p คำจำกัดความที่ขัดแย้งกันในคำจำกัดความจึงยังใช้ได้อยู่
มาดูเอฟเฟกต์การวิ่งกันดีกว่า:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ซอร์สโค้ดที่จะรัน: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http //www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { สี: สีแดง; พื้นหลัง: สีเหลือง }p { สี: สีเขียว </style></head><body><p>admin5</p></body></ html> <p class="สีแดง เขียว น้ำเงิน">www.admin5.com</p> <p class="สีเขียวสีน้ำเงินสีแดง">admin5</p> <p class="สีน้ำเงิน แดง เขียว">www.admin5.com</p> |
บางทีคุณอาจคิดว่าคุณเข้าใจแล้ว คุณเข้าใจจริงๆเหรอ? โอเค มาทำแบบทดสอบกันหน่อย
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ตัวอย่างซอร์สโค้ด: .red { สี: สีแดง } .เขียว { สี: เขียว } .blue { สี: น้ำเงิน } - <p class="red green blue">admin5</p> <p class="green blue red">สวรรค์แห่งการเรียนรู้ของผู้ดูแลเว็บ</p> <p class="สีน้ำเงิน แดง เขียว">www.admin5.com</p> |
โปรดบอกฉันว่าข้อความในสามย่อหน้าด้านบนจะปรากฏเป็นสีอะไรเมื่อแสดงในที่สุด
โปรดอย่ารีบเร่งที่จะเรียกใช้โค้ดต่อไปนี้ ลองคิดดูว่ามันจะเป็นสีอะไร?
เอาล่ะ คุณได้คิดดูแล้ว มาดูผลของการดำเนินการกันดีกว่า:
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: ซอร์สโค้ดที่จะรัน: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http //www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { color: red }.green { color: green }.blue { color: blue </style></head><body><p class=" แดง เขียว น้ำเงิน">admin5</p><p class="green blue red">สวรรค์แห่งการเรียนรู้ของผู้ดูแลเว็บ</p><p class="blue red green">www.admin5.com</p></body > </html> |
คำตอบคือทั้งหมดจะแสดงเป็นสีน้ำเงิน นั่นคือสีน้ำเงิน แม้ว่าแต่ละย่อหน้าจะมีรูปแบบย่อหน้าสามแบบที่ใช้ตามลำดับที่แตกต่างกัน แต่ดูเหมือนว่าสีควรถูกกำหนดตามลำดับที่ใช้สไตล์ต่างๆ อันแรกจะแสดงเป็นสีน้ำเงิน และอันแรกจะแสดงเป็นสีน้ำเงิน ซึ่งใช้สไตล์ต่างๆ ในที่สุดทั้งหมดก็เป็นไปตามสไตล์ที่ระบุสุดท้าย และสีก็เป็นสีน้ำเงิน! โปรดอย่ากังวลหากคุณพบปัญหาที่คล้ายกันในอนาคต เนื่องจากการทดลองข้างต้นได้ให้คำตอบแก่คุณแล้ว