เครื่องหมายดอกจัน (*) ทำอะไรในตัวเลือก CSS

ฉันพบโค้ด CSS นี้และฉันรันมันเพื่อดูว่ามันทำอะไรและมันสรุปทุกองค์ประกอบในหน้า

ใครช่วยอธิบายสิ่งที่ Asterisk * ทำใน CSS ได้บ้าง

<style>
* { 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 }
</style>

เป็นสัญลักษณ์แทนซึ่งหมายความว่าจะเลือกองค์ประกอบทั้งหมดภายในส่วนนั้นของ DOM

ตัวอย่างเช่นหากฉันต้องการใช้ระยะขอบกับทุกองค์ประกอบในทั้งหน้าคุณสามารถใช้:

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

ตัวอย่างของคุณกำลังใช้กลอุบาย css เพื่อใช้เส้นขอบและระยะขอบต่อเนื่องกับองค์ประกอบเพื่อให้เส้นขอบหลายสี ตัวอย่างเช่นขอบสีขาวล้อมรอบด้วยขอบสีดำ

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

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

* เป็นสัญลักษณ์แทน ความหมายก็คือจะใช้สไตล์กับองค์ประกอบ HTML ใด ๆ เพิ่มเติม * ใช้สไตล์กับระดับการซ้อนที่สอดคล้องกัน

ตัวเลือกนี้จะใช้โครงร่างสีต่างๆกับองค์ประกอบทั้งหมดของหน้าขึ้นอยู่กับระดับการซ้อนขององค์ประกอบ

* ทำหน้าที่เป็นตัวแทนเช่นเดียวกับในกรณีอื่น ๆ ส่วนใหญ่

ถ้าคุณทำ:

*{
  margin: 0px;
  padding: 0px;
  border: 1px solid red;
}

จากนั้นองค์ประกอบ HTML ทั้งหมดจะมีสไตล์เหล่านั้น

ในสไตล์ชีตของคุณโดยปกติคุณต้องกำหนดกฎพื้นฐานสำหรับองค์ประกอบทั้งหมดเช่นแอตทริบิวต์ขนาดตัวอักษรและระยะขอบ {font-size: 14px; ระยะขอบ: 0; padding: 0;} /แทนที่การตั้งค่าเริ่มต้นของเบราว์เซอร์ในองค์ประกอบขนาดแบบอักษรข้อความทั้งหมดจะแสดงเป็นขนาด 14 พิกเซลโดยมีขอบเป็นศูนย์และช่องว่างภายในรวมถึง h1, ... pre * /