:и после:после

есть ли какая-либо функциональная разница между CSS 2.1 :after и CSS 3 ::after псевдо-селекторы (кроме ::after Не поддерживается в старых браузерах)? Есть ли практическая причина использовать более новую спецификацию?

2 ответов


это псевдо-класс vs псевдо -элемент различие.

за исключением ::first-line, ::first-letter, ::before и ::after (которые были вокруг некоторое время и могут быть использованы с одним двоеточием, если вам требуется поддержка IE8), псевдо-элементов требуются двойное двоеточие.

псевдо-классы выберите сами фактические элементы, вы можете использовать :first-child или :nth-of-type(n) для выбора первой или специфический <p> ' s в 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/after-v-after-what-is-double-colon-notation/


селекторы CSS, такие как ::after некоторые виртуальные элементы недоступны как явный элемент в дереве DOM. Они называются "Псевдо-Элементами " и привыкли к вставить содержимое до/после элемента (например: ::before, ::after) или выберите какую-то часть элемента (например: ::first-letter). В настоящее время существует только 5 стандартных псевдо-элементы: after, before, first-letter, first-line, selection.

С другой стороны, есть и другие типы селекторов, называемых "Псевдо-Классы", которые используются для определения особые состояния элемента (например, as :hover, :focus, :nth-child(n)). Они будут выбирать весь существующий элемент в DOM. Псевдо-классы-это длинный список с более чем 30 элементами.

первоначально (в CSS2 и CSS1) синтаксис с одним двоеточием использовался как для псевдоклассов, так и для псевдо-элементов. Но, в CSS3 в :: синтаксис заменил : обозначения для псевдо-элементов, чтобы лучше различать их.

для обратной совместимости старый синтаксис с одним двоеточием приемлем для псевдо-элементов, таких как :after (браузеры все еще поддерживают старый синтаксис с одной точкой с запятой). Только IE-8 не поддерживает новый синтаксис (используйте одинарную двоеточие, если вы хотите поддерживать IE8).