Что делает Asterisk (*) в селекторе 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>

Ответы

Ответ 1

Это подстановочный знак, это означает, что он выберет все элементы внутри этой части DOM.

Например, если я хочу применить маржу к каждому элементу на моей странице, вы можете использовать:

* {
    margin: 10px;
}

Вы также можете использовать это в подвыборках, например, следующее добавило бы маржу ко всем элементам в теге абзаца:

p * {
    margin: 10px;
}

В вашем примере используется CSS-обход, чтобы применить последовательные границы и поля к элементам, чтобы дать им несколько цветных границ. Например, белая рамка, окруженная черной рамкой.

Ответ 2

CSS, который вы указали, очень полезен для веб-дизайнера для отладки проблем макета страницы. Я часто вывожу его на страницу временно, поэтому я могу видеть размер всех элементов страницы и отслеживать, например, ту, у которой слишком много отступов, которые подталкивают другие элементы к месту.

То же самое можно сделать только с первой строкой, но преимущество определения нескольких контуров заключается в том, что вы получаете визуальную подсказку через цвет границы для иерархии вложенных элементов страницы.

Ответ 3

* является подстановочным знаком. Это означает, что он применит стиль к любому элементу HTML. Дополнительно * применить стиль к соответствующему уровню вложенности.

Этот селектор будет применять разные цветные контуры для всех элементов страницы, в зависимости от уровня вложенности элементов.

Ответ 4

* действует как подстановочный знак, как и в большинстве других случаев.

Если вы выполните:

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

Затем все элементы HTML будут иметь эти стили.

Ответ 5

в вашей таблице стилей, обычно вам нужно определить основное правило для всех элементов, таких как атрибут размера шрифта и поля. {Размер шрифта: 14px; Маржа: 0; обивка: 0;} /overide браузера по умолчанию для элементов, весь размер шрифта текста будет отображаться как размер 14 пикселей с нулевым запасом и отступом, включая h1,... pre. */