Что делает звездочка (*) в селекторе CSS?

Question

Я нашел этот код 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>

Answer 1

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

Answer 2

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

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

Answer 3

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

Если вы делаете:

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

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

Answer 4

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

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

Answer 5

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