: после против :: после

Question

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

Answer 1

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

За исключением ::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/after-v-after-what-is-double-colon-notation/

Answer 2

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 (все браузеры по-прежнему поддерживают старый синтаксис с одной точкой с запятой). Только IE-8 не поддерживает новый синтаксис (используйте одиночную двоеточие, если вы хотите поддерживать IE8).