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

StackOverflow https://stackoverflow.com/questions/1204275

  •  05-07-2019
  •  | 
  •  

Вопрос

Я нашел этот код 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>
Это было полезно?

Решение

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

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

* {
    margin: 10px;
}

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

p * {
    margin: 10px;
}

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

Другие советы

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

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top