Назначение *: до, *: после правила без свойства содержимого
Из того, что я понимаю, :before а также :after вставляет содержимое до или после указанной цели. Я не совсем уверен, какова цель этого фрагмента CSS?
*, *:before, *:after {
-moz-box-sizing: border-box;
}
2 ответа
Это относится к размерам рамки как ко всем элементам, так и к любым :before а также :after псевдоэлементы, которые они могут генерировать. *:before, *:after часть означает соответствующие псевдоэлементы любого элемента.
Как только вы создаете :before/:after позднее в вашей таблице стилей это объявление будет автоматически применяться ко всем этим псевдоэлементам, поэтому вам не нужно повторять его в каждом из ваших правил псевдоэлемента. Другими словами, каскад работает точно так же для псевдоэлементов, как и для реальных элементов: если у вас есть отдельные правила, совпадающие с одной и той же вещью, пока они совпадают, они все будут применены.
Обратите внимание, что для того, чтобы элемент действительно генерировал :before или же :after, его content должно быть что-то кроме none, Сам по себе CSS, который вы дали, не заставит каждый элемент автоматически генерировать оба псевдоэлемента; он просто гарантирует, что браузер будет использовать размеры рамки, если ему нужно отрендерить любой из них. Смотрите спецификацию, как работает сгенерированный контент.
Например, следующий CSS:
*, *:before, *:after {
box-sizing: border-box;
}
div:after {
content: "hello";
}
приводит к div"s :after псевдоэлемент, имеющий размеры рамки. Никакие другие элементы не генерируют :after псевдоэлементы, но если будет введено больше правил CSS, все они будут иметь одинаковый размер блока из универсального правила.
Обратите внимание, что box-sizing: border-box без -moz- Префикс должен появиться в данном CSS, чтобы другие браузеры также применяли такой же размер окна. -moz- Префикс используется Firefox до версии 28 (только что выпущенная версия 29 поставляется с префиксом box-sizing). Смотрите этот ответ.
Он применяется ко всем элементам со всеми псевдоэлементами (:before,:after) и заставляет их использовать border-box Размер коробки
Для получения дополнительной информации о box-sizing проверьте здесь: http://css-tricks.com/box-sizing/
border-boxЗначение делает окончательный визуализированный блок объявленной шириной, а любые границы и отступы внутри блока.
*, *:before, *:after {
box-sizing: border-box;
}
Это сделано для того, чтобы не повторяться везде, где вы используете :after а также :before. Он автоматически добавляет ко всем:after а также :before.