เลือกองค์ประกอบลูกทั้งหมดซ้ำใน CSS

407

คุณจะเลือกองค์ประกอบย่อยทั้งหมดแบบวนซ้ำได้อย่างไร?

div.dropdown, div.dropdown > * {
    color: red;
}

ชั้นนี้จะโยนชั้นบน className ที่กำหนดไว้และลูก ๆ ทันที ในวิธีง่ายๆคุณสามารถเลือกโหนดเด็กทั้งหมดได้ดังนี้:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

css css-selectors

— clarkk
แหล่งที่มา

621

ใช้พื้นที่สีขาวเพื่อจับคู่ผู้สืบทอดทั้งหมดขององค์ประกอบ

div.dropdown * {
    color: red;
}

x yจับคู่ทุกองค์ประกอบyที่อยู่ภายในxอย่างไรก็ตามอาจซ้อนกันได้ - เด็กหลานและอื่น ๆ

เครื่องหมายดอกจัน*ตรงกับองค์ประกอบใด ๆ

— anroesti
แหล่งที่มา

มันทำงาน แต่ตอนนี้มันแทนที่ชั้นเรียนอื่น ๆ ทั้งหมดแม้ว่าจะมีความสำคัญสูง .. (พวกเขาจะอยู่ต่อไปใน CSS แฟ้ม)

— clarkk

ตัวเลือกยังมีบทบาทในคุณสมบัติที่มีความสำคัญไม่ใช่เฉพาะในไฟล์ที่ปรากฏ คุณสามารถลองเพิ่ม `! สำคัญ 'กับค่าของคุณเช่นcolor: red !important;

— anroesti

ฉันรู้ว่ามันน่าเกลียดนิดหน่อย คุณสามารถลองเขียนตัวเลือกที่แม่นยำยิ่งขึ้นแทนได้โอกาสนี้ก็ใช้ได้เช่นกัน (เช่น#head ul→ #head ul#navi)

— anroesti

โอเคตัวอย่างพื้นฐานมาก: p.xyมีความสำคัญมากกว่าpเพราะมันมีความเฉพาะเจาะจงมากกว่า jsfiddle.net/ftJVX

— anroesti

ถ้าฉันต้องการเด็กทุกคนที่มีชั้นเรียนเฉพาะ

— MEM

144

กฎมีดังต่อไปนี้:

A B

B เป็นผู้สืบทอดของ A

A > B

B ในฐานะลูกของ A

ดังนั้น

div.dropdown *

และไม่

div.dropdown > *

— Abdennour TOUMI
แหล่งที่มา