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

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

может кто-нибудь объяснить, что Звездочка * делает в 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>
90
css css-selectors

5 ответов

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

88

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

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

29

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

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

4

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

Если вы:

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

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

4

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

0