อะไรคือความแตกต่างระหว่าง: first-child และ: first-of-type?

124

ฉันไม่สามารถบอกความแตกต่างระหว่างelement:first-childและelement:first-of-type

ตัวอย่างเช่นคุณมี div

div:first-child
→ <div>องค์ประกอบทั้งหมดที่เป็นลูกคนแรกของพ่อแม่

div:first-of-type
→ <div>องค์ประกอบทั้งหมดที่เป็น<div>องค์ประกอบแรกของพาเรนต์

สิ่งนี้ดูเหมือนจะเหมือนกันทุกประการ แต่ทำงานต่างกัน

ใครช่วยอธิบายหน่อย

css css-selectors

— กลอนนาฬิกา
แหล่งที่มา

ลูกคนแรกกำหนดเป้าหมายลูกคนแรกของพ่อแม่เท่านั้นโดยที่ประเภทแรกกำหนดเป้าหมายลูกคนแรกของประเภทนั้น (div หรือ a span หรืออะไรก็ตามที่คุณพยายามกำหนดเป้าหมาย)

— Huangism

ลูก 'div' คนแรกอาจมีพี่น้องที่มีอายุมากกว่า first-of-type จะเลือก div ดังกล่าวเนื่องจากเป็นลูกคนแรกของประเภทลูกคนแรกจะไม่เลือก div นั้นเนื่องจากไม่ใช่องค์ประกอบลูกตัวแรก

— n8bar

207

องค์ประกอบหลักสามารถมีองค์ประกอบลูกอย่างน้อยหนึ่งรายการ:

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

ในบรรดาเด็กเหล่านี้มีเพียงคนเดียวเท่านั้นที่สามารถเป็นคนแรกได้ สิ่งนี้จับคู่โดย:first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

ความแตกต่างระหว่าง:first-childและ:first-of-typeคือ:first-of-typeจะตรงกับองค์ประกอบแรกของประเภทองค์ประกอบซึ่งใน HTML แสดงด้วยชื่อแท็กแม้ว่าองค์ประกอบนั้นจะไม่ใช่ลูกคนแรกของพาเรนต์ก็ตาม จนถึงตอนนี้องค์ประกอบของลูกที่เรากำลังดูอยู่นั้นเป็นไปหมดแล้วdivแต่อดทนกับฉันไว้สักหน่อยฉันจะไปถึงจุดนั้น

สำหรับตอนนี้การสนทนายังถือเป็นความจริง: ใด ๆ:first-childก็เป็นไป:first-of-typeตามความจำเป็น เนื่องจากลูกคนแรกที่นี่เป็นคนแรกdivด้วยจึงจะจับคู่ทั้งคลาสหลอกและตัวเลือกประเภทdiv:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

ตอนนี้ถ้าคุณเปลี่ยนชนิดของลูกคนแรกจากdivไปอย่างอื่นเช่นh1มันจะยังคงเป็นเด็กคนแรก แต่มันจะไม่เป็นคนแรกที่divเห็นได้ชัด; แทนมันจะกลายเป็นคนแรก h1(และ) หากมีคนอื่น ๆdivองค์ประกอบดังต่อไปนี้ลูกคนแรกภายในแม่เดียวกันเป็นครั้งแรกในบรรดาองค์ประกอบแล้วจะตรงกับdiv div:first-of-typeในตัวอย่างที่กำหนดลูกคนที่สองจะกลายเป็นคนแรกdivหลังจากที่ลูกคนแรกเปลี่ยนเป็นh1:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

โปรดทราบว่า:first-childเทียบเท่ากับ:nth-child(1).

นอกจากนี้ยังบอกเป็นนัยว่าแม้ว่าองค์ประกอบใด ๆ อาจมีการจับคู่องค์ประกอบลูกเดียว:first-childในแต่ละครั้ง แต่ก็สามารถและจะมีลูกจำนวนมากที่ตรงกับชั้น:first-of-typeหลอกตามจำนวนประเภทของลูกที่มี ในตัวอย่างของเราตัวเลือก.parent > :first-of-type(โดย*มีคุณสมบัติโดยนัยที่มีคุณสมบัติ:first-of-typeหลอก) จะจับคู่สององค์ประกอบไม่ใช่เพียงองค์ประกอบเดียว:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

สิ่งเดียวกันนี้ถือเป็นจริงสำหรับ:last-childและ:last-of-type: ใด ๆ:last-childก็เป็นไปตามความจำเป็นเช่น:last-of-typeกันเนื่องจากไม่มีองค์ประกอบอื่นใดตามมาภายในพาเรนต์ แต่เนื่องจากคนสุดท้ายdivยังเป็นลูกคนสุดท้ายเด็กคนสุดท้ายh1จึงไม่สามารถเป็นลูกคนสุดท้ายได้แม้ว่าจะเป็นลูกคนสุดท้ายก็ตาม

:nth-child()และ:nth-of-type()ฟังก์ชั่นเหมือนกันมากในหลักการเมื่อใช้กับอาร์กิวเมนต์จำนวนเต็มพล (ใน:nth-child(1)ตัวอย่างที่กล่าวมาข้างต้น) :nth-of-type()แต่ที่พวกเขาแตกต่างกันคือในจำนวนที่มีศักยภาพของการจับคู่โดยองค์ประกอบ นี่คือรายละเอียดในp: nth-child (2) และ p: nth-of-type (2) ต่างกันอย่างไร

— กลอนนาฬิกา
แหล่งที่มา

4

ในที่สุดฉันก็เข้าใจ ถ้าฉันต้องการ div แรกภายใต้องค์ประกอบ div ฉันจะเรียก div: first-of-type เนื่องจากอาจมีองค์ประกอบที่ไม่ใช่ div อยู่ด้านบน มันสับสนเล็กน้อย แต่ตอนนี้ฉันเข้าใจแล้ว นี่เป็นโพสต์ที่ยอดเยี่ยมและให้ข้อมูลมาก ขอบคุณและความช่วยเหลือของคุณจะได้รับการชื่นชมอย่างมาก

1

ฉันได้สร้างตัวอย่างตามคำตอบนี้: codepen.io/bigtinabang/pen/pmMPxO

— Tina Chen

14

ฉันได้สร้างตัวอย่างเพื่อแสดงให้เห็นถึงความแตกต่างระหว่างfirst-childและfirst-of-typeที่นี่

HTML

<div class="parent">
  <p>Child</p>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

CSS

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

ดูตัวอย่างทั้งหมดได้ที่https://jsfiddle.net/bwLvyf3k/1/

— เหวิน
แหล่งที่มา

0

ความแตกต่างระหว่างประเภทลูกคนแรกและลูกคนแรกสามารถเข้าใจได้ด้วยตัวอย่างคุณต้องเข้าใจตัวอย่างต่อไปนี้ที่ฉันสร้างขึ้นและมันใช้งานได้จริงคุณสามารถวางรหัสในตัวแก้ไขของคุณคุณจะเข้าใจว่ามันคืออะไรและอย่างไร งานของเขา

รหัส # 1 สำหรับประเภทแรก:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

ผลลัพธ์

.p1, .p2, .p3 จะมีสไตล์และสีของพวกเขาจะเป็นสีแดงแม้ว่าเราจะใส่. p1 หลัง div ที่สองมันก็จะเป็นสีแดง

รหัส # 2 สำหรับลูกคนแรก:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

ผลลัพธ์:

ถ้าเราใส่. p2 หลัง div 2 ตัวที่สองมันจะไม่เป็นสีแดง แต่ในกรณีแรกมันใช้งานได้

— เคลียร์ทุกอย่าง
แหล่งที่มา