ตัวเลือกตัวเลือก CSS เป็นพื้นฐานสำหรับการจัดวางหน้าเว็บ CSS ของเรา CSS Selector คืออะไร และจะใช้อย่างไรให้สมเหตุสมผล? Selector สามารถแบ่งออกเป็น 3 หมวดหมู่ ยกเว้นหมวดหมู่แรกของตัวเลือก HTML เราสามารถตั้งชื่ออีกสองหมวดหมู่ได้ด้วยตัวเอง เมื่อตั้งชื่อ ให้ใส่ใจกับการรวมความหมายหรือเพิ่มความคิดเห็นที่จำเป็นเพื่อทำให้โค้ดของเราชัดเจนและอ่านง่ายขึ้น .
ตัวเลือกแท็กตัวเลือก HTML
ตัวเลือก HTML คือแท็ก HTML เช่น: DIV, TD, P, H1 ฯลฯ หากคุณกำหนดด้วย CSS คุณสมบัติของแท็กนี้ในหน้าที่ควบคุมโดยบทความ CSS จะแสดงตามคำจำกัดความของคุณ
ตัวอย่างเช่น ถ้าเราต้องการให้สีของ H1 เป็นสีแดง ดังนั้น: H1 {color: red} ที่นี่เราเรียนรู้คุณสมบัติของ CSS ซึ่งสามารถกำหนดตัวเลือกได้หลายตัวในกฎ เช่น: H1, H2, TD {สี: แดง} คำจำกัดความนี้อนุญาตให้ H1, H2 และ TD ทั้งหมดเป็นสีแดง ในการใช้งานเฉพาะ สามารถรวมและเขียนแอตทริบิวต์หลายรายการที่มีการตั้งค่าเดียวกันเพื่อลดโค้ดของเราได้
ตัวเลือกคลาส ตัวเลือกคลาส
ตัวเลือกคลาสมีสองประเภท ประเภทหนึ่งเรียกว่าตัวเลือกคลาสที่เกี่ยวข้อง ซึ่งเกี่ยวข้องกับแท็ก HTML ตัวอย่างเช่น: เราต้องการตั้งค่าสีของ H1 บางส่วนแต่ไม่ใช่ทั้งหมดให้เป็นสีแดง H1.redone {color: red}: H1 อันแรกเป็นสีแดง แต่อันที่สองไม่ใช่สีแดง
ประเภทที่สองคือตัวเลือกคลาสอิสระ สามารถใช้กับแท็ก HTML ใดก็ได้ ไวยากรณ์ของมันคือดังนี้ Classname {property: value} หากเรามีคำจำกัดความต่อไปนี้ blueone {color: blue} เราก็สามารถใช้มันกับแท็กอื่นได้ เห็นได้ชัดว่าตัวเลือกคลาสทำให้เรามีอิสระและมีพื้นที่ในการเล่นมากขึ้น
ตัวเลือก ID ตัวเลือก ID
ที่จริงแล้ว ฟังก์ชั่นของตัวเลือก ID นั้นคล้ายคลึงกับฟังก์ชั่นของตัวเลือกคลาสอิสระมาก ความแตกต่างก็คือไวยากรณ์และการใช้งานแตกต่างกัน และมีประโยชน์สำหรับจาวาสคริปต์ในการจัดการองค์ประกอบ HTML ในเลย์เอาต์ของเรา เรามักจะใช้ตัวเลือก ID เพื่อกำหนดพื้นที่โครงสร้างที่แตกต่างกัน
ไวยากรณ์จะเป็นดังนี้ #IDname {property:value} สมมติว่าเรามีคำจำกัดความต่อไปนี้ #yelowone {สี: สีเหลือง} เราสามารถใช้คำจำกัดความนี้กับแท็กใดๆ ที่มีชื่อ ID เดียวกันได้ เช่น: ข้อความที่นี่ คุณอาจคิดว่าเนื่องจากตัวเลือก ID มีฟังก์ชันเหมือนกับตัวเลือกคลาสอิสระ ทำไมทั้งสองจึงมีอยู่? องค์ประกอบ HTML ที่มี ID สามารถจัดการได้ด้วย JavaScript