Я нашел этот код 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, чтобы применить последовательные границы и поля к элементам, чтобы дать им несколько цветных границ. Например, белая рамка, окруженная черной рамкой.
p *по сравнению с простым использованием p?
pтега. Так что если у вас был span, b, strong, imgи т.д. внутри вашего пункта, было бы выбрать те , и применить стили к ним.
CSS, на который вы ссылались, очень полезен веб-дизайнеру для устранения проблем с макетом страницы. Я часто временно вставляю его на страницу, чтобы увидеть размер всех элементов страницы и отследить, например, тот, у которого слишком много отступов, которые смещают другие элементы с места.
Тот же трюк можно проделать только с первой строкой, но преимущество определения нескольких контуров состоит в том, что вы получаете визуальную подсказку по цвету границы к иерархии вложенных элементов страницы.
Ctrl+Shift+cзатем нахожу курсор на элемент, и Chrome раскрашивает фон. Гораздо быстрее, чем вставлять этот стиль звездочки в CSS.
* - это подстановочный знак. Это означает, что стиль будет применен к любому элементу HTML. Дополнительные * применяют стиль к соответствующему уровню вложенности.
Этот селектор применяет разноцветные контуры ко всем элементам страницы в зависимости от уровня вложенности элементов.
* действует как подстановочный знак, как и в большинстве других случаев.
Если вы это сделаете:
*{
margin: 0px;
padding: 0px;
border: 1px solid red;
}Тогда все элементы HTML будут иметь эти стили.
в таблице стилей обычно необходимо определить базовое правило для всех элементов, таких как атрибут размера шрифта и поля. {размер шрифта: 14 пикселей; маржа: 0; padding: 0;} / переопределить настройку браузера по умолчанию для элементов, весь размер шрифта текста будет отображаться как размер 14 пикселей с нулевым полем и заполнением, включая h1, ... pre. * /
div * { outline ...}и* { outline ... }. Если я использую* { outline ... }и используется* * { outline ... }только последнее описание css.