: после vs. :: после

134

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

css css-selectors pseudo-element pseudo-class Паркер Олт
источник

Ответы:

133

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

За исключением ::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-после-что-это-двойное двоеточие-обозначение /

Dominic
источник

Именно из-за этого различия "псевдоселектор" (из вопроса) - бессмысленный термин. Никогда не используйте его.

BoltClock

если вы не говорите о них обоих. или в общих чертах.

Альберт

Это прекрасное объяснение теории, но имеет ли оно отношение к практическим вопросам? Есть ли на самом деле какая-то польза от использования спецификации css3, заключающаяся в том, что css2 будет выполнять ту же работу - в большем количестве браузеров?

DRosenfeld

@Dominic спасибо - я благодарен за то, что вы обратились к моему комментарию. Нет никаких сомнений в том, что проблема поддержки (по крайней мере, этого) тега CSS3 на данный момент почти не проблема.

DRosenfeld

@ BorisD.Teoharov В частности, вы можете использовать :afterи ::afterвзаимозаменяемо с идентичным поведением, за исключением IE8, который, как отмечается в вопросе, требует единственного двоеточия.

Dominic

Селекторы 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).

S.Serpooshan
источник