it-swarm.com.ru

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

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

89
Soviut

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

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

29
Tom

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

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

4
futureelite7

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

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

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

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

4
Mike Trpcic

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

0
Mikel bradley benjamin