ตัวเลือก CSS id

ตัวเลือก CSS id กำหนดเป้าหมายองค์ประกอบ HTML ด้วยรหัสที่ไม่ซ้ำกัน

ไวยากรณ์ตัวเลือกรหัส:

#id-name {
    property-name: value;
}

นี่คือองค์ประกอบ HTML ที่มีชื่อรหัสเดียวกันกับค่าแอตทริบิวต์:

<div id="id-name"></div>

ตัวเลือก CSS id #id-name แนบมากับ <div> องค์ประกอบที่มี id-name คุณลักษณะ. นั่นหมายความว่าคุณสมบัติการจัดสไตล์ใดก็ตามที่คุณเพิ่มใน .id-name ในสไตล์ชีต CSS ของคุณจะถูกนำไปใช้กับ <div> .

สัญลักษณ์แฮช (# ) ก่อนชื่อ id เป็นไวยากรณ์ CSS เฉพาะ เมื่อคุณเพิ่มชื่อรหัสให้กับองค์ประกอบ HTML เป็นแอตทริบิวต์รหัส คุณไม่ได้ใช้ # สัญลักษณ์

ตอนนี้ ลองใช้สิ่งที่เราเพิ่งเรียนรู้ในตัวอย่างที่ใช้งานได้จริง

นี่คือ HTML <button> องค์ประกอบที่มีสไตล์เริ่มต้นที่สืบทอดมาจาก User Agent Stylesheet ของเบราว์เซอร์:

<button>Button</button>

รูปลักษณ์เริ่มต้น:

น่าเบื่อเหรอ?

มาแทนที่รูปแบบปุ่มเริ่มต้นโดยสร้างรหัส CSS ชื่อ #my-button และให้คุณสมบัติการจัดแต่งทรงผม:

#my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

จากนั้นเพิ่ม id ให้กับองค์ประกอบปุ่มเป็นแอตทริบิวต์ id:

<button id="my-button">Button</button>

ผลลัพธ์:

สิ่งสำคัญที่สุดที่ต้องทราบเกี่ยวกับตัวเลือก id คือ id ตัวเลือกคลาส CSS นั้นไม่สามารถใช้กับองค์ประกอบเดียวในหน้าเท่านั้น ทำให้รหัสมีความยืดหยุ่นในการใช้งานน้อยกว่าคลาส แต่ยังคาดเดาได้มากกว่า

หลักการทั่วไปคือใช้รหัสสำหรับองค์ประกอบเดียวที่ปรากฏบนหน้าเว็บเพียงครั้งเดียว เช่น ส่วนหัว ส่วนท้าย หรือแถบนำทาง