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

ฉันมี html ต่อไปนี้

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

และรูปแบบดังต่อไปนี้:

DIV.section DIV:first-child 
{
  ...
}

ด้วยเหตุผลบางอย่างที่ผมไม่เข้าใจว่ารูปแบบจะได้รับนำไปใช้กับ"เนื้อหาย่อย 1" <div>เช่นเดียวกับ"หัว" <div>

ฉันคิดว่าตัวเลือกเกี่ยวกับสไตล์จะใช้กับลูกโดยตรงคนแรกของ div ที่มีคลาสที่เรียกว่า "ส่วน" ฉันจะเปลี่ยนตัวเลือกเพื่อให้ได้สิ่งที่ต้องการได้อย่างไร

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

ไม่มีความชัดเจนสำหรับฉันว่าคุณต้องการให้ลูกทั้งคู่ของ div หลักหรือไม่ ถ้าเป็นเช่นนั้นใช้สิ่งนี้:

div.section > div

หากคุณต้องการส่วนหัวให้ใช้สิ่งนี้:

div.section > div:first-child

การใช้การ>เปลี่ยนแปลงคำอธิบายเป็น: "ค้นหา divs ใด ๆ ที่เป็นตัวสืบทอดโดยตรงของ div div" ซึ่งเป็นสิ่งที่คุณต้องการ

โปรดทราบว่าเบราว์เซอร์หลักทั้งหมดรองรับวิธีนี้ยกเว้น IE6 หากการสนับสนุน IE6 เป็นภารกิจที่สำคัญคุณจะต้องเพิ่มคลาสให้กับ div ลูกและใช้สิ่งนั้นแทน ไม่อย่างนั้นมันก็ไม่คุ้มค่าที่จะใส่ใจ

พบคำถามนี้ค้นหาใน Google สิ่งนี้จะคืนค่าลูกคนแรกขององค์ประกอบที่มีคลาสcontainerโดยไม่คำนึงว่าเป็นเด็กประเภทใด

.container > *:first-child
{
}

CSS เรียกว่าสไตล์ชีทการเรียงเนื่องจากกฎจะสืบทอด การใช้ตัวเลือกต่อไปนี้จะเลือกเฉพาะลูกโดยตรงของผู้ปกครอง แต่กฎจะถูกสืบทอดโดยdivลูก ๆ ของผู้นั้นdivs:

div.section > div { color: red }

ตอนนี้ทั้งสองที่div และredเด็กของมันจะเป็น คุณต้องยกเลิกสิ่งที่คุณตั้งไว้บนพาเรนต์หากคุณไม่ต้องการให้สืบทอด:

div.section > div { color: red }
div.section > div div { color: black }

ตอนนี้เฉพาะซิงเกิ้ลdivที่เป็นลูกโดยตรงของdiv.sectionจะเป็นสีแดง แต่ลูกของมันdivsจะยังคงเป็นสีดำ

div.section > div

div.section > divใช้

ยังดีกว่าใช้<h1>แท็กสำหรับส่วนหัวและdiv.section h1CSS ของคุณเพื่อรองรับเบราว์เซอร์รุ่นเก่า (ที่ไม่รู้เกี่ยวกับ>) และรักษาความหมายของมาร์คอัป

ตัวเลือก CSS สำหรับลูกคนแรกโดยตรงในกรณีของคุณคือ:

.section > :first-child

ตัวเลือกโดยตรงคือ> และตัวเลือกลูกแรกคือ: ลูกคนแรก

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

div.section > :first-child