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


134

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

Ответы:


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


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

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

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

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

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

14

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.