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

98

Я нашел этот код 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>
css css-selectors ДжейсонДэвис
источник
@jasondavis - этот вопрос относится к вашему коду, иначе я бы просто задал новый вопрос. На вашей странице отображается несколько контуров разного цвета? Единственный способ получить такие разные цвета - это указать тег, а затем * IE div * { outline ...}и * { outline ... }. Если я использую * { outline ... }и используется * * { outline ... }только последнее описание css.
JabberwockyDecompiler

Ответы:

95

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

Совиут
источник
В чем преимущество использования p *по сравнению с простым использованием p?
Соломон Клоссон
7
Нет «преимущества», это просто то, как вы выбираете все дочерние элементы внутри pтега. Так что если у вас был span, b, strong, imgи т.д. внутри вашего пункта, было бы выбрать те , и применить стили к ним.
Soviut
30

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

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

Том
источник
2
Хотя в наши дни браузер со встроенными инспекторами намного эффективнее, не так ли? Или с помощью firebug.
Лоуренс Дол
@SoftwareMonkey - Да, в наши дни это правда. Встроенные инспекторы великолепны. Например, я использую Chrome, а Ctrl+Shift+cзатем нахожу курсор на элемент, и Chrome раскрашивает фон. Гораздо быстрее, чем вставлять этот стиль звездочки в CSS.
Tom
1
Хотя Совьют верен, этот ответ следовало бы отметить как правильный ответ, потому что это точный ответ на заданный вопрос.
Билли Сэмюэл
4

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

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

futureelite7
источник
4

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

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

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

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

Майк Трпчич
источник
0

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

Микель брэдли бенджамин
источник