ความแตกต่างระหว่าง Class และ ID

คลาสกับ ID

Cascading Style Sheets (CSS) คือภาษาที่อธิบายรูปลักษณ์และการจัดรูปแบบของเอกสารที่เขียนโดยใช้ภาษามาร์กอัป CSS ใช้กันอย่างแพร่หลายในการออกแบบหน้าเว็บที่เขียนด้วย HTML CSS อนุญาตให้ระบุ selectors สไตล์ของคุณเองนอกเหนือไปจากการใช้สไตล์สำหรับองค์ประกอบ HTML นี้จะกระทำโดยใช้ ID และ selectors ชั้น เมื่อระบุสไตล์สำหรับองค์ประกอบเฉพาะที่ไม่เหมือนกันระบบจะใช้ตัวเลือกรหัส เมื่อระบุสไตล์สำหรับกลุ่มขององค์ประกอบตัวเลือกชั้นจะใช้

Class คืออะไร?

ใน CSS คุณสามารถใช้ตัวเลือกระดับเพื่อใช้สไตล์ของคุณกับกลุ่มขององค์ประกอบได้ ตัวเลือกชั้นจะใช้เพื่อใช้สไตล์เฉพาะกับชุดขององค์ประกอบที่มีชั้นเดียวกัน ใน CSS ตัวเลือกชั้นจะถูกระบุโดยเครื่องหมายจุด () ต่อไปนี้เป็นตัวอย่างของตัวเลือกชั้นเรียนที่กำหนดไว้ใน CSS

my_class {

สี: ฟ้า;

font-weight: หนา;

}

HTML สามารถอ้างอิงถึงคลาสที่กำหนดไว้ใน CSS โดยใช้คลาสแอตทริบิวต์ดังที่แสดงไว้

นี่คือการจัดรูปแบบของฉัน

นี่คือการจัดรูปแบบของฉันอีกครั้ง

ดังที่แสดงไว้ข้างต้นสามารถใช้คลาสเดียวกันได้สำหรับองค์ประกอบหลาย ๆ ส่วนและองค์ประกอบเดียวสามารถใช้หลายชั้นได้ เมื่อมีการใช้คลาสหลายชั้นในองค์ประกอบเดียวกันชั้นเรียนจะถูกแทรกลงในแอ็ตทริบิวต์ class ที่คั่นด้วยช่องว่างดังที่แสดงไว้

นี่คือการจัดรูปแบบของฉันโดยใช้สองคลาส

ID คืออะไร?

ใน CSS คุณสามารถใช้ตัวเลือกรหัสเพื่อใช้สไตล์ของคุณกับองค์ประกอบที่เป็นเอกลักษณ์เฉพาะได้ ใน CSS ตัวระบุรหัสจะถูกระบุโดยกัญชา (#) ต่อไปนี้เป็นตัวอย่างของตัวเลือกรหัสที่กำหนดไว้ใน CSS

#my_ID {

สี: สีแดง;

text-align: right;

}

HTML สามารถอ้างอิงถึงตัวเลือกรหัสที่กำหนดไว้ใน CSS โดยใช้รหัสแอตทริบิวต์ดังที่แสดงไว้

รูปแบบการจัดรูปแบบของฉัน ID ผู้เลือก ID

ไม่ซ้ำกัน ดังนั้นแต่ละองค์ประกอบสามารถมีได้เพียง ID เดียวและแต่ละหน้าสามารถมีได้เพียงองค์ประกอบเดียวที่มี ID เฉพาะเท่านั้น รหัสมีลักษณะสำคัญที่สามารถใช้กับเบราว์เซอร์ได้ หาก URL ของหน้าเว็บมีค่าแฮช (เช่น // myweb. com # my_id) เบราเซอร์จะพยายามค้นหาองค์ประกอบโดยอัตโนมัติพร้อมกับ ID "my_id" และเลื่อนหน้าเว็บเพื่อแสดงองค์ประกอบดังกล่าว นี่เป็นเหตุผลหนึ่งที่หน้าเว็บควรมีองค์ประกอบเดียวที่มีรหัสเฉพาะเพื่อให้เบราว์เซอร์สามารถหาองค์ประกอบดังกล่าวได้

ความแตกต่างระหว่าง Class และ ID คืออะไร?

แม้ว่าทั้งสองตัวเลือก Class และตัวเลือก ID สามารถใช้เพื่อใช้สไตล์ของคุณกับองค์ประกอบต่างๆในเว็บเพจได้ แต่ก็มีความแตกต่างที่สำคัญบางอย่าง ตัวเลือกชั้นสามารถใช้เพื่อใช้สไตล์ของคุณกับกลุ่มขององค์ประกอบได้ในขณะที่ตัวเลือกรหัสจะถูกใช้เพื่อใช้สไตล์กับองค์ประกอบที่เป็นเอกลักษณ์และไม่ซ้ำใคร เมื่อใช้รหัสแต่ละองค์ประกอบสามารถมีได้เพียง ID เดียวและแต่ละหน้าสามารถมีได้เพียงองค์ประกอบเดียวที่มี ID เฉพาะ แต่สามารถใช้คลาสสำหรับองค์ประกอบหลาย ๆ อันและองค์ประกอบเดียวสามารถใช้คลาสได้หลายคลาสนอกจากนี้คุณยังสามารถใช้รหัสเพื่อเลื่อนหน้าเว็บโดยอัตโนมัติเพื่อแสดงองค์ประกอบที่มีรหัสนี้ แต่ไม่สามารถใช้ตัวเลือกชั้นเรียนได้