ความเข้าใจและการประยุกต์ใช้ ID และคลาสในรูปแบบหน้าเว็บ XHTML CSS:
หากมีเพียง XHTML และ CSS เท่านั้นที่สามารถเชิงวัตถุได้ - พระอาทิตย์ควรจะขึ้นทางทิศเหนือ อย่างไรก็ตาม ทุกอย่างควรถูกมองด้วยความคิดแบบ OO และเราแทบจะไม่สามารถสร้างตัวเลขขึ้นมาได้ ในความเป็นจริงมีคนเสนอสไตล์ OO ตั้งแต่ปี 2000 แต่ก็ไม่พบอีกต่อไป
แล้วต้องทำอย่างไร? ตอนนี้ทุกคนรู้แล้วว่า CSS สามารถเขียนได้ดังนี้:
| .G_G { /* xxxxxx */ } |
เราสามารถคิดว่ามันเป็นต้นแบบหรือคลาส -__-b ดูเหมือนจะเป็นคลาสเดิมแล้ว "สร้างตัวอย่าง" วัตถุใน HTML ตัวอย่างเช่น:
| ＜div class="G_G">คนบ้าร้องไห้ </div> |
องค์ประกอบนี้จะใช้คำจำกัดความที่สอดคล้องกันของ CSS แต่คลาสที่เกี่ยวข้องนั้นไม่เพียงพอ เนื่องจากหน้าของเราอาจใช้คลาสนี้ในหลาย ๆ ที่ เพื่อที่จะจัดการกับความสัมพันธ์ "ส่วนตัว" ให้เปลี่ยนโค้ดตอนนี้เป็น:
| ＜div id="aoao" class="G_G">คนบ้าร้องไห้ </div> |
ในกรณีนี้ องค์ประกอบที่มี ID aaoao จะใช้คำจำกัดความของคลาส .G_G และคุณสามารถใช้ตัวเลือก เช่น #aoao{} เพื่อป้อนคำจำกัดความของเอฟเฟกต์ส่วนตัว ซึ่งจะไม่ส่งผลกระทบต่อคลาส .G_G สาธารณะ ในเวลาเดียวกัน ลำดับความสำคัญที่กำหนดโดย #aoao จะสูงกว่า .G_G ซึ่งสอดคล้องกับสามัญสำนึกที่ว่าคำจำกัดความส่วนตัวมีลำดับความสำคัญสูงกว่าคำจำกัดความสาธารณะ^^
เนื่องจากฉันใช้สิ่งที่เป็นเอกลักษณ์เช่น ID การใช้สิ่งที่กำหนดเป็นการส่วนตัวซ้ำจึงกลายเป็นปัญหา (รหัสสามารถปรากฏได้เพียงครั้งเดียวบนหน้าเว็บ ฉันไม่รู้ว่าใครพูดอย่างนั้น แต่ยังไงซะมันก็เป็นความจริง) จะเป็นอย่างไรหากเราต้องการบรรลุการแปรรูปสิ่งเดียวกันหลายๆ อย่าง? จากนั้นเราจะต้องนำ "ความหลากหลาย" ไปปฏิบัติ ขุด ฮ่าๆ เปลี่ยนรหัสอีกครั้ง:
| ＜div class="G_G o_O">คนบ้าร้องไห้ </div> |
อันหนึ่งคือ "G_G" และอีกอันคือ "o_O" แต่ถ้าเราใช้ .o_O{} เราก็สามารถกำหนดองค์ประกอบได้เช่นกัน หาก CSS เป็นดังนี้:
| .G_G {ความกว้าง:100%} .o_O {สี:#123456} |
องค์ประกอบทั้งหมดจะถูกกำหนด และเนื่องจากคำจำกัดความไม่ซ้อนกัน จึงจะถูกนำไปใช้ทั้งหมด ถ้าโค้ดเป็นแบบนี้ก็ไม่รู้ว่าจะเข้าใจง่ายกว่านี้หรือเปล่า
＜div class="layout color">ไม่ใช่นกโง่＜/div> .รูปแบบ{ความกว้าง:100%} |
ต่อไปเราจำเป็นต้องดำเนินการ "การห่อหุ้ม" คุณควรใช้ตัวเลือกลูกบ่อยๆ เปลี่ยนรหัส:
| ＜div class="G_G"＞＜span class="bendan"">คนบ้า＜/span>อุ๊ย＜/div> |
แม้ว่าจะสามารถกำหนดทั้ง .bendan{} และ .G_G .bendan{} ได้ แต่อย่างหลังสามารถนำไปใช้กับองค์ประกอบที่มีคลาส "G_G" เท่านั้น เราสามารถเข้าใจได้ว่า .bendan{} เป็นคำจำกัดความสากลและ .G_G .bendan{ } เข้าใจว่าเป็นคำจำกัดความบางส่วน ซึ่งเป็นประโยชน์ต่อการทำให้ XHTML และ CSS ของเราเป็นโมดูล ^^ตำนาน "การห่อหุ้ม" ปรากฏขึ้น และจากนั้นก็ดำเนินต่อไป
| ＜div id="aoao" class="G_G o_O"">＜span class="bendan">คนบ้า＜/span>嗷嗷＜/div> |
โค้ดดังกล่าวสามารถสร้างการเปลี่ยนแปลงได้นับไม่ถ้วน และหากคุณไม่เข้าใจ คุณจะต้องเริ่มต้นใหม่ทั้งหมด -
เข้าใจการประยุกต์ใช้ ID และคลาสอย่างลึกซึ้งในรูปแบบหน้าเว็บ XHTML CSS!