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