ID และคลาสแตกต่างกันอย่างไร

ความแตกต่างระหว่าง<div class="">และ<div id="">เมื่อมาถึง CSS คืออะไร? มันใช้ได้<div id="">ไหม?

ฉันเห็นผู้พัฒนาที่แตกต่างกันทำสิ่งนี้ทั้งสองวิธีและเนื่องจากฉันสอนตัวเองฉันไม่เคยคิดเลย

idsต้องไม่ซ้ำกันซึ่งclassสามารถนำไปใช้กับหลายสิ่งได้ ใน CSS idมีลักษณะ#elementIDและclassองค์ประกอบต่าง ๆ.someClass

โดยทั่วไปให้ใช้idเมื่อใดก็ตามที่คุณต้องการอ้างถึงองค์ประกอบเฉพาะและclassเมื่อคุณมีหลายสิ่งที่เหมือนกันทั้งหมด ยกตัวอย่างเช่นที่พบบ่อยidองค์ประกอบเป็นสิ่งที่ต้องการheader, ,footer sidebarทั่วไปclassองค์ประกอบเป็นสิ่งที่ต้องการหรือhighlightexternal-link

เป็นความคิดที่ดีที่จะอ่านบนน้ำตกและทำความเข้าใจกับลำดับความสำคัญที่กำหนดให้กับตัวเลือกต่างๆ: http://www.w3.org/TR/CSS2/cascade.html

พื้นฐานที่สำคัญที่สุดที่คุณควรเข้าใจคือidตัวเลือกนั้นสำคัญกว่าclassตัวเลือก หากคุณมีสิ่งนี้:

<p id="intro" class="foo">Hello!</p>

และ:

#intro { color: red }
.foo { color: blue }

ข้อความจะเป็นสีแดงเนื่องจากidตัวเลือกมีความสำคัญมากกว่าclassตัวเลือก

บางทีการเปรียบเทียบจะช่วยให้เข้าใจความแตกต่าง:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

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

ไม่เป็นไรที่จะให้นักเรียนหลายคนอยู่ภายใต้การเดียวกัน ชั้นชื่อเช่นชีววิทยา แต่ก็ไม่เคยยอมรับได้ที่จะให้นักเรียนหลายคนอยู่ภายใต้รหัสนักศึกษาเดียว

เมื่อให้กฎบนระบบอินเตอร์คอมของโรงเรียนคุณสามารถให้กฎกับชั้นเรียนได้ :

พรุ่งนี้นักเรียนทุกคนต้องใส่เสื้อแดงในชั้นเรียนวิชาชีววิทยา

.Biology {
  color: red;
}

หรือคุณสามารถให้กฎแก่นักเรียนที่เฉพาะเจาะจงได้โดยโทรหาเขาที่ไม่ซ้ำใคร ID ที่ :

"โจนาธานแซมพ์สันจะใส่เสื้อสีเขียวในวันพรุ่งนี้"

#JonathanSampson {
  color: green;
}

ในกรณีนี้ Jonathan Sampson ได้รับคำสั่งสองคำสั่ง: หนึ่งคำสั่งในฐานะนักเรียนในชั้นเรียนชีววิทยาและอีกคำสั่งหนึ่งเป็นข้อกำหนดโดยตรง เพราะโจนาธานบอกโดยตรงผ่านการใช้รหัสประจำตัวเพื่อสวมเสื้อสีเขียวเขาจะไม่สนใจคำขอก่อนหน้านี้ที่จะสวมใส่เสื้อแดง

ตัวเลือกที่เฉพาะเจาะจงมากขึ้นจะชนะ

จะใช้ ID กับที่ใด

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

ID เป็นเครื่องมือที่ทรงพลังอย่างเหลือเชื่อ องค์ประกอบที่มี ID สามารถเป็นเป้าหมายของชิ้นส่วนของ JavaScript ที่จัดการองค์ประกอบหรือเนื้อหาในบางวิธี สามารถใช้แอตทริบิวต์ ID เป็นเป้าหมายของลิงก์ภายในโดยแทนที่แท็ก anchor ด้วยแอตทริบิวต์ name สุดท้ายถ้าคุณทำให้ ID ของคุณชัดเจนและมีเหตุผลพวกเขาก็สามารถใช้เป็น "เอกสารประกอบตัวเอง" ภายในเอกสาร ตัวอย่างเช่นคุณไม่จำเป็นต้องเพิ่มความคิดเห็นก่อนที่บล็อกที่ระบุว่าบล็อกของรหัสจะมีเนื้อหาหลักหากแท็กเปิดของบล็อกมี ID ของพูดว่า "main", "header", "footer "ฯลฯ

รหัสต้องไม่ซ้ำกันในทั้งหน้า

คลาสอาจใช้กับองค์ประกอบหลายอย่าง

บางครั้งควรใช้รหัส

ในหน้าคุณมักจะมีส่วนท้ายหนึ่งส่วนหัวหนึ่ง ...

จากนั้นส่วนท้ายอาจเป็น div ที่มี ID

<div id = "footer" class = "... ">

และยังมีชั้นเรียน

CLASSควรจะใช้สำหรับองค์ประกอบหลายอย่างที่คุณต้องการจัดแต่งทรงผมเหมือนกันสำหรับ IDควรจะเป็นสำหรับองค์ประกอบที่ไม่ซ้ำกัน ดูบทช่วยสอนนี้

คุณควรอ้างถึงมาตรฐานของ W3Cหากคุณต้องการที่จะปฏิบัติตามอย่างเคร่งครัดหรือหากคุณต้องการให้หน้าของคุณได้รับการตรวจสอบความถูกต้องตามมาตรฐาน

ID ไม่ซ้ำกัน ชั้นเรียนไม่ได้ อิลิเมนต์ยังสามารถมีคลาสได้หลายคลาส นอกจากนี้คลาสยังสามารถเพิ่มและลบออกไปยังองค์ประกอบแบบไดนามิก

ทุกที่ที่คุณสามารถใช้ ID คุณสามารถใช้คลาสแทนได้ การย้อนกลับไม่เป็นความจริง

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

หนึ่งความแตกต่างอื่น ๆ ที่เป็นองค์ประกอบการป้อนข้อมูลแบบฟอร์มที่<label>อ้างอิงองค์ประกอบสนามโดยใช้ ID <label>ดังนั้นคุณจำเป็นต้องใช้รหัสถ้าคุณกำลังจะใช้ เป็นสิ่งที่เข้าถึงได้ง่ายและคุณควรใช้มันจริงๆ

ในหลายปีที่ผ่านไปโดยรหัสก็เป็นที่ต้องการเพราะพวกเขาสามารถเข้าถึงได้ง่ายใน Javascript (getElementById) ด้วยการถือกำเนิดของ jQuery และเฟรมเวิร์ก Javascript อื่น ๆ นี่เป็นเรื่องที่ไม่เป็นปัญหา

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

ID เป็นตัวระบุ พวกมันไม่เหมือนใคร ไม่มีใครได้รับอนุญาตให้มี ID เดียวกัน ID ใช้เพื่อนำสไตล์ที่ไม่ซ้ำไปใช้กับองค์ประกอบ HTML

ฉันใช้ ID และคลาสในแบบนี้:

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

ในตัวอย่างนี้ส่วนหัวและส่วนเนื้อหาสามารถจัดรูปแบบผ่านทาง #header และ #content แต่ละส่วนของเนื้อหาสามารถใช้สไตล์ร่วมกันผ่าน #content .section สำหรับการเตะฉันเพิ่มคลาส "พิเศษ" สำหรับส่วนตรงกลาง สมมติว่าคุณต้องการให้ส่วนใดส่วนหนึ่งมีสไตล์เป็นพิเศษ สิ่งนี้สามารถทำได้ด้วยคลาส. specialial แต่ส่วนนั้นยังคงสืบทอดสไตล์ทั่วไปจาก #content .section

เมื่อฉันทำการพัฒนา JavaScript หรือ CSS ฉันมักจะใช้ ID เพื่อเข้าถึง / จัดการองค์ประกอบ HTML ที่เฉพาะเจาะจงมากและฉันใช้คลาสเพื่อเข้าถึง / ใช้สไตล์กับองค์ประกอบที่หลากหลาย

CSS เป็นเชิงวัตถุ ID พูดว่าอินสแตนซ์ class says class

เมื่อใช้ CSS ให้ใช้กับคลาสและพยายามหลีกเลี่ยง ID ให้มากที่สุด ID ควรใช้ใน JavaScript เพื่อดึงองค์ประกอบหรือการเชื่อมโยงเหตุการณ์ใด ๆ

ควรใช้คลาสเพื่อใช้ CSS

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

CSS selector space จริง ๆ แล้วอนุญาตสำหรับลักษณะ id ตามเงื่อนไข:

h1#my-id {color:red}
p#my-id {color:blue}

จะแสดงผลตามที่คาดไว้ ทำไมคุณถึงทำเช่นนี้? บางครั้งรหัสถูกสร้างขึ้นแบบไดนามิก ฯลฯ การใช้งานต่อไปคือแสดงชื่อที่แตกต่างกันตามการกำหนด ID ระดับสูง:

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

โดยส่วนตัวแล้วฉันชอบตัวเลือกชื่อคลาสที่ยาวกว่า:

body#list-page .title-block > h1 {font-size:56px}

ตามที่ฉันค้นหาโดยใช้ ID ที่ซ้อนกันเพื่อแยกความแตกต่างของการรักษาให้เป็นบิตผิดปกติ เพิ่งรู้ว่าในฐานะนักพัฒนาในSass / SCSSโลกได้รับมือกับสิ่งนี้ ID ที่ซ้อนกันจะกลายเป็นบรรทัดฐาน

ในที่สุดเมื่อมันมาถึงการเลือกประสิทธิภาพและความสำคัญ, ID มีแนวโน้มที่จะชนะ นี่เป็นเรื่องอื่นทั้งหมด

องค์ประกอบใด ๆ สามารถมีคลาสหรือรหัส

คลาสใช้เพื่ออ้างอิงการแสดงผลบางประเภทตัวอย่างเช่นคุณอาจมีคลาส css สำหรับ div ที่แสดงคำตอบของคำถามนี้ เนื่องจากจะมีคำตอบมากมาย Divs จำนวนมากจึงต้องการสไตล์เดียวกันและคุณจะใช้คลาส

id หมายถึงองค์ประกอบเดียวเท่านั้นตัวอย่างเช่นส่วนที่เกี่ยวข้องทางด้านขวาอาจมีการกำหนดสไตล์เฉพาะที่ไม่ได้ใช้ซ้ำในที่อื่น ๆ ก็จะใช้รหัส

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

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

ในIDการพัฒนาขั้นสูงเราสามารถใช้ JavaScript ได้

เพื่อจุดประสงค์ในการทำซ้ำคลาส es มีประโยชน์ในทางตรงกันข้ามกับid s ซึ่งควรจะไม่ซ้ำกัน

ด้านล่างเป็นตัวอย่างที่แสดงให้เห็นถึงการแสดงออกข้างต้น:

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

ตอนนี้คุณสามารถเห็นได้ในที่นี่boxและbox1เป็น<div>องค์ประกอบที่แตกต่างกันสอง (2) แต่เราสามารถใช้boxและbg-color-redคลาสกับทั้งคู่

แนวคิดคือการสืบทอดในภาษาOOP

1) div id ไม่สามารถนำกลับมาใช้ใหม่ได้และควรใช้กับองค์ประกอบหนึ่งของ HTML เท่านั้นในขณะที่สามารถเพิ่มคลาส div ในองค์ประกอบหลาย ๆ องค์ประกอบ

2) รหัสมีความสำคัญมากขึ้นถ้าทั้งคู่ถูกนำไปใช้กับองค์ประกอบเดียวกันและมีรูปแบบที่ขัดแย้งกันรูปแบบของรหัสจะถูกนำไปใช้

3) องค์ประกอบสไตล์อ้างถึงคลาส div เสมอโดยการใส่ (dot) ด้านหน้าชื่อของพวกเขาในขณะที่คลาส id id ถูกอ้างอิงโดยใส่ # (hash) ไว้ด้านหน้าชื่อ

4) ตัวอย่าง: -

ชั้นเรียนใน<style>การประกาศ -.red-background { background-color: red; }

ID ใน<style>การประกาศ - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div> พื้นหลังที่นี่จะเป็นสีน้ำเงิน

idและclassเป็นแอตทริบิวต์ Global / Standard HTML สองรายการ (แอตทริบิวต์ส่วนกลางด้านล่างสามารถใช้กับองค์ประกอบ HTML ใดก็ได้)

class ระบุชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไปสำหรับองค์ประกอบ (หมายถึงคลาสในสไตล์ชีต)

id ระบุ id เฉพาะสำหรับองค์ประกอบ

แอ็ตทริบิวต์ id ให้องค์ประกอบตัวระบุที่ไม่ซ้ำกันทั้งเอกสารซึ่งแอตทริบิวต์ class มีวิธีการจำแนกองค์ประกอบที่คล้ายกัน

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

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

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

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

ดูตัวอย่างด้านล่าง

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

เราสร้างผลลัพธ์

เอาท์พุต