Есть ли какая-либо функциональная разница между псевдоселекторами CSS 2.1 :afterи CSS 3 ::after(кроме того, что они ::afterне поддерживаются в старых браузерах)? Есть ли практическая причина использовать новую спецификацию?
Есть ли какая-либо функциональная разница между псевдоселекторами CSS 2.1 :afterи CSS 3 ::after(кроме того, что они ::afterне поддерживаются в старых браузерах)? Есть ли практическая причина использовать новую спецификацию?
Ответы:
Это псевдо- класс против псевдо- элемента различия.
За исключением ::first-line, ::first-letter, ::beforeи ::after(что было вокруг некоторое время , и может быть использован с одиночными двоеточием , если вам необходима поддержка IE8), псевдоэнергиями элементы требуют двойного двоеточия.
Псевдоклассы сами выбирают фактические элементы, например, вы можете использовать :first-childили :nth-of-type(n)для выбора первых или конкретных элементов <p>в div.
(А также состояния реальных элементов, таких как :hoverи :focus.)
Псевдоэлементы нацелены на части элемента, такие как ::first-lineили ::first-letter, вещи, которые не являются элементами сами по себе.
На самом деле, лучше описание здесь: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Также здесь: http://www.evotech.net/blog/2007/ 05 / после-V-после-что-это-двойное двоеточие-обозначение /
:afterи ::afterвзаимозаменяемо с идентичным поведением, за исключением IE8, который, как отмечается в вопросе, требует единственного двоеточия.
Селекторы CSS, такие ::afterкак некоторые виртуальные элементы, недоступны как явный элемент в дереве DOM. Их называют « Псевдо-элементы » и используются для вставки некоторого содержимого перед / после элемента (например: ::before, ::after) или выберите какую - то часть элемента (например , ::first-letter). На данный момент существует всего 5 стандартных псевдоэлементов:after, before, first-letter, first-line, selection .
С другой стороны, существуют и другие типы селекторов называемых « Псевдоклассы » , которые используются для определения особого состояния элемента (например , как :hover, :focus, :nth-child(n)). Они выберут весь существующий элемент в DOM. Псевдоклассы - это длинный список из более чем 30 пунктов.
Первоначально (в CSS2 и CSS1) синтаксис с одним двоеточием использовался как для псевдоклассов, так и для псевдоэлементов. Но в CSS3 ::синтаксис заменил :нотацию псевдоэлементов, чтобы лучше их различать.
Для обратной совместимости :afterстарый синтаксис с одним двоеточием приемлем для псевдоэлементов, таких как as (все браузеры по-прежнему поддерживают старый синтаксис с одной точкой с запятой). Только IE-8 не поддерживает новый синтаксис (используйте одинарное двоеточие, если вы хотите поддерживать IE8).