อักขระ“ มากกว่า” หรือ“>” ถูกใช้ใน CSS อย่างไร

ฉันเคยเห็นตัวละครนี้หลายครั้งในไฟล์ CSS แต่ฉันไม่รู้ว่ามันใช้งานอย่างไร ทุกคนสามารถอธิบายให้ฉันและแสดงว่าพวกเขามีประโยชน์ในการทำให้รูปแบบหน้าง่ายขึ้นได้อย่างไร

มันเป็นตัวเลือกลูก CSS P > SPANหมายถึงการใช้สไตล์ที่ตามมากับแท็ก SPAN ทั้งหมดที่เป็นลูกของPแท็ก

โปรดทราบว่า "เด็ก" หมายถึง "ผู้สืบทอดทันที" ไม่ใช่เพียงผู้สืบทอดเท่านั้น P SPANเป็นตัวเลือกผู้สืบทอดซึ่งใช้สไตล์ที่ตามมากับSPANแท็กทั้งหมดที่เป็นชายด์ของPแท็กหรือชายด์แบบเรียกซ้ำของแท็กอื่นใดที่เป็นชายด์ / สืบทอดของPแท็ก P > SPANใช้กับSPANแท็กที่เป็นPแท็กย่อยเท่านั้น

p em

จะตรงกับการใด ๆที่อยู่ภายใน<em> <p>ตัวอย่างเช่นมันจะตรงกับ<em>s ต่อไปนี้:

<p><strong><em>foo</em></strong></p>
<p>Text <em>foo</em> bar</p>

ในทางกลับกัน,

p > em

จะตรงกับเพียง<em>s <p>ที่มีเด็กทันที ดังนั้นมันจะตรงกับ:

<p>Text <em>foo</em> bar</p>

แต่ไม่:

<p><strong><em>foo</em></strong></p>

สิ่งนี้เป็นที่รู้จักกันในชื่อ Child Combinator:

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

div.resources > a{color: white;}

(จากhttp://www.xml.com/pub/a/2003/06/18/css3-selectors.html )

E > F

ตรงกับองค์ประกอบ F ใด ๆ ที่เป็นลูกขององค์ประกอบ E

เพิ่มเติมเกี่ยวกับhttp://www.w3.org/TR/CSS21/selector.html#child-selectors