ตัวเลือก * * CSS ทำอะไร?

97

เมื่อเร็ว ๆ นี้ฉันมาข้าม* *ในCSS

อ้างอิงเว็บไซต์ - เชื่อมโยงเว็บไซต์

สำหรับการ*ใช้งานเพียงครั้งเดียวในสไตล์ชีต CSS Internet และ Stack Overflow จะเต็มไปด้วยตัวอย่าง แต่ฉันไม่แน่ใจเกี่ยวกับการใช้* *สัญลักษณ์สองตัวใน CSS

ฉัน googled มัน แต่ไม่พบข้อมูลที่เกี่ยวข้องใด ๆ เกี่ยวกับเรื่องนี้เนื่องจากตัวเดียว*เลือกองค์ประกอบทั้งหมด แต่ฉันไม่แน่ใจว่าทำไมไซต์ถึงใช้มันสองครั้ง อะไรคือส่วนที่ขาดหายไปของสิ่งนี้และเหตุใดจึงใช้แฮ็กนี้ (หากเป็นการแฮ็ก)

html css css-selectors

— แลกเปลี่ยน
แหล่งที่มา

138

เช่นเดียวกับครั้งอื่น ๆ ที่คุณใส่ตัวเลือกสองตัวทีละตัว (เช่นli a) คุณจะได้ตัวรวมผู้สืบทอด ดังนั้น* *องค์ประกอบใด ๆ ที่เป็นลูกหลานขององค์ประกอบอื่น ๆ กล่าวคือองค์ประกอบใด ๆ ที่ไม่ใช่องค์ประกอบรากของเอกสารทั้งหมด

— ฮอบส์
แหล่งที่มา

ขอบคุณสำหรับการตอบกลับ .. นี่คือสิ่งที่ฉันคิด แต่ไม่แน่ใจจึงคิดที่จะถามจากชุมชน. จะยอมรับในไม่ช้า +1

— swapnesh

1

อีกอย่างที่จะถาม - มันเกี่ยวข้องกับการใช้ * * จริงหรือ? แม้ว่าฉันจะเข้าใจแนวคิด แต่ไม่เข้าใจในทางปฏิบัติ :(

— swapnesh

2

@swapnesh ดูเหมือนว่าเบราว์เซอร์แฮ็ค มี* { font-size: XXX }กฎและ* * { font-size: YYY }กติกา หนึ่งในนั้นใช้ได้กับเบราว์เซอร์ส่วนใหญ่และอีกอันใช้กับเบราว์เซอร์ที่มีข้อบกพร่องบางอย่างแม้ว่าฉันจะไม่อดทนในการหารายละเอียดก็ตาม คล้ายกับการ* htmlแฮ็กที่เคยใช้กันทั่วไปในการตรวจหา IE รุ่นเก่า

— hobbs

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

— แลกเปลี่ยน

10

โปรดทราบว่าในลักษณะของ* html, * * จะตรงกับองค์ประกอบ HTML ใน IE6

— Alohci

80

ตัวอย่างที่ยิ่งใหญ่เพียงเล็กน้อย:

ลองเพิ่มสิ่งนี้ในไซต์ของคุณ:

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

การสาธิต: http://jsfiddle.net/l2aelba/sFSad/

ตัวอย่างที่ 2:

การสาธิต: http://jsfiddle.net/l2aelba/sFSad/34/

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

7

นี่ไม่ใช่คำตอบอย่างเคร่งครัด แต่ช่างเป็นภาพที่น่ารัก!

— aboy021

1

@ l2aelba เป็นคำอธิบายที่ดีจริงๆ :) +1

— swapnesh

33

* *จับคู่ทุกอย่างยกเว้นองค์ประกอบระดับบนสุดเช่นhtml.

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

ขอบคุณ Joe ทดสอบที่นี่และตามความคิดเห็นด้านบน: * *ตัวเลือกเทียบเท่ากับhtml *เบราว์เซอร์ทั้งหมดยกเว้น IE6 รุ่นเก่าที่ดี :-)

— Stano

@Stano * *เทียบเท่ากับhtml *... สำหรับไฟล์ HTML แต่ CSS อาจถูกใช้เพื่อจัดรูปแบบเอกสารประเภทอื่น ๆ (โดยเฉพาะอย่างยิ่ง SVG)

— Sylvain Leroux

11

* หมายถึงใช้สไตล์ที่กำหนดกับองค์ประกอบทั้งหมด

* *หมายถึงใช้สไตล์ที่กำหนดให้กับองค์ประกอบลูกทั้งหมดขององค์ประกอบ ตัวอย่าง:

body > * {
  margin: 0;
}

สิ่งนี้ใช้รูปแบบระยะขอบกับองค์ประกอบลูกทั้งหมดของร่างกาย วิธีการเดียวกัน,

* * {
  margin: 0;
}

ใช้margin: 0กับ*องค์ประกอบลูกของ กล่าวโดยย่อคือใช้ได้margin: 0กับเกือบทุกองค์ประกอบ

โดยทั่วไปหนึ่ง*ก็เพียงพอแล้ว ไม่จำเป็นต้องมีสอง* *อย่าง

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

2

ขอบคุณสำหรับคำอธิบาย +1 .. แม้ว่าฉันจะไม่แน่ใจในสิ่งที่คุณเพิ่งพูดถึงในบรรทัดสุดท้าย "โดยทั่วไป * ก็เพียงพอแล้วไม่จำเป็นต้อง * * ฉันเดา"

— swapnesh

3

* *ใช้สไตล์กับองค์ประกอบที่สืบทอดไม่ใช่องค์ประกอบลูก องค์ประกอบย่อยจะเป็นไป>ตามตัวอย่างของคุณไม่ใช่ช่องว่าง ลูกหลานไม่ใช่สิ่งเดียวกัน

— BoltClock

7

การเลือกองค์ประกอบทั้งหมดที่ซ้อนอยู่ภายในองค์ประกอบอื่นในลักษณะเดียวกันdiv aจะเป็นการเลือก<a>องค์ประกอบทั้งหมดที่ซ้อนอยู่ที่ใดที่หนึ่งภายใน<div>องค์ประกอบ

— ไมค์แบรนต์
แหล่งที่มา