В чем разница между div::after {} и div:after {}? Когда мы должны использовать :: поверх :?
Двойная и двоеточие обозначают разницу между псевдоклассы и псевдоэлементы.
Каково действительное значение вышеприведенного утверждения?
В чем разница между псевдоклассами и псевдоэлементами?
Ответ 1
Псевдокласс:
Псевдокласс CSS - это ключевое слово, которому предшествует двоеточие (:), добавляемое в конец селекторов для указания того, что вы хотите стилизовать выбранные элементы, и только когда они находятся в определенном состоянии. Например, вам может потребоваться стилизовать элемент только тогда, когда на него наведен указатель мыши, или флажок, когда он отключен или отмечен, или элемент, который является первым дочерним элементом его родителя в дереве DOM.
Примеры:
- : Активный
- : Проверено
- : П-й ребенок()
- : Первый
- : Парить
Псевдоэлементы ::
Псевдоэлементы очень похожи на псевдоклассы, но имеют различия. Это ключевые слова, на этот раз им предшествуют две двоеточия (: :), которые можно добавить в конец селекторов для выбора определенной части элемента.
Примеры:
- :: после
- :: Перед
- :: первой буквы
- :: первой линии
- :: Выбор
- :: фон
Как сказано в @stephanmg:
На практике :: before используется как: before, а :: after используется как: after из-за совместимости браузера. Оба являются псевдоэлементами, но могут похожи на псевдо-классы. Это может сбивать с толку, если вы читаете CSS код.
Ответ 2
Псевдоклассы: он автоматически применяется браузером в зависимости от положения элемента или его интерактивного состояния.
Пример:
E:hover Соответствует элементам типа E, когда курсор
завиваясь над ним.
Псевдоэлементы: Он применяет стили к контенту основанный на его позиции в иерархии HTML.
Пример:
E::first-letter Это применяет стиль к первой букве первой строки внутри блочного уровня
элемент E.
Итак,
Спецификация селекторов CSS3 префикс псевдоэлементов с двумя двоеточиями вместо одного. Итак: первая буква становится:: first-letter и: first-line становится:: first-line. IE 8 и ранее не понимают префикс с двойной двоеточием, поэтому вам нужно использовать версии с одной колонкой, чтобы избежать стирания в старых браузерах.