CSS ลูกเทียบกับตัวเลือกเรียงลำดับ

ฉันสับสนเล็กน้อยระหว่างตัวเลือก 2 ตัวนี้

ทำการเลือกสืบทอด :

div p

เลือกทั้งหมดpภายในdivว่าเหมาะสมหรือไม่ ดังนั้นถ้าpอยู่ข้างในdivก็จะยังคงถูกเลือก?

จากนั้นตัวเลือกลูก :

div > p

ความแตกต่างคืออะไร? เด็กหมายถึงเด็กทันทีหรือไม่? เช่น.

<div><p>

VS

<div><div><p>

ทั้งสองจะถูกเลือกหรือไม่?

แค่คิดว่าคำว่า "ลูก" และ "ลูกหลาน" มีความหมายเป็นภาษาอังกฤษ:

• ลูกสาวของฉันเป็นทั้งลูกและลูกหลานของฉัน
• หลานสาวของฉันไม่ใช่ลูกของฉัน แต่เธอเป็นลูกหลานของฉัน

ใช่คุณถูกต้อง. div pจะจับคู่ตัวอย่างต่อไปนี้ แต่div > pจะไม่

<div><table><tr><td><p> <!...

คนแรกที่เรียกว่าเลือกลูกหลานและคนที่สองจะเรียกว่าตัวเลือกของเด็ก

Bascailly " AB " เลือก B ทุกภายในขณะที่ " A> B " เลือกขของสิ่งที่เป็นเด็กเท่านั้นที่จะก็จะไม่เลือกขสิ่งที่เป็นลูกของขสิ่งที่เป็นลูกของ

ตัวอย่างนี้แสดงให้เห็นถึงความแตกต่าง:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

สีพื้นหลังของabcและdefจะเป็นสีเขียว แต่ghiจะมีสีพื้นหลังสีแดง

สำคัญ:หากคุณเปลี่ยนลำดับของกฎเป็น:

div>span{background:green}
div span{background:red}

ตัวอักษรทั้งหมดจะมีพื้นหลังสีแดงเนื่องจากตัวเลือกผู้สืบทอดจะเลือกเด็กเช่นกัน

ตามทฤษฏี: เด็ก => ผู้สืบเชื้อสายจากบรรพบุรุษทันที (เช่นโจและพ่อของเขา)

Descendant => องค์ประกอบใด ๆ ที่สืบเชื้อสายมาจากบรรพบุรุษโดยเฉพาะ (เช่นโจและพ่อทวดของเขา)

ในทางปฏิบัติ:ลอง HTML นี้:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

ด้วย CSS นี้:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

โปรดทราบว่าตัวเลือกลูกไม่ได้รับการสนับสนุนใน Internet Explorer 6 (หากคุณใช้ตัวเลือกในตัวเลือก jQuery / Prototype / YUI เป็นต้นแทนที่จะใช้สไตล์ชีตก็ยังใช้ได้อยู่)

div 

เลือกองค์ประกอบ 'p' ทั้งหมดที่ผู้ปกครองเป็นองค์ประกอบ 'div'

div> p

มันหมายความว่าเด็ก ๆ ทันทีเลือกองค์ประกอบ 'p' ทั้งหมดที่ผู้ปกครองเป็นองค์ประกอบ 'div'

การเลือก CSS และการใช้สไตล์กับองค์ประกอบเฉพาะสามารถทำได้ผ่านการสำรวจผ่านองค์ประกอบ dom [ตัวอย่าง

ตัวอย่าง

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>