Есть ли какая-либо функциональная разница между псевдоселекторами CSS 2.1 :after и CSS 3 ::after (кроме того, что ::after не поддерживается в старых браузерах)? Есть ли практическая причина использовать более новую спецификацию?
:после против ::после
Ответы (2)
Это различие между псевдо-классом и псевдо-элементом.
За исключением ::first-line, ::first-letter, ::before и ::after (которые существуют уже некоторое время и могут использоваться с одинарными двоеточиями, если вам требуется поддержка IE8), псевдо-элементы требуют double двоеточия.
Псевдоклассы сами выбирают фактические элементы, вы можете использовать :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-обозначениесдвойнымдвоеточием/
person
Dominic
schedule
24.01.2012
Именно из-за этого различия псевдоселектор (из вопроса) является бессмысленным термином. Не используйте его, никогда.
- person BoltClock; 07.08.2012
если вы не говорите о них обоих. или в общих чертах.
- person albert; 07.08.2012
Это отличное объяснение теории, но имеет ли оно отношение к практическим вопросам? Есть ли какая-либо польза от использования спецификации css3 в том, что css2 будет выполнять ту же работу - в большем количестве браузеров?
- person DRosenfeld; 24.02.2016
@DRosenfeld Я немного обновил ответ, чтобы отразить, что только IE8 не обрабатывает версию ::before/::after с двойным двоеточием и т. д. Пожалуйста, не стесняйтесь редактировать ответ, чтобы улучшить ясность!
- person Dominic; 25.02.2016
@ Доминик, спасибо - я ценю, что ты обратился к моему комментарию. Нет никаких сомнений в том, что проблема поддержки (по крайней мере, этого) тега CSS3 на данный момент почти не является проблемой.
- person DRosenfeld; 25.02.2016
@albert: Но вы не можете говорить о них обоих в общих чертах таким образом, чтобы отличать их как единую группу от других функций селектора. Это две разные функции селектора. Это было бы похоже на попытку отличить селекторы и свойства под одним общим термином от других функций, таких как at-правила (и в этом конкретном случае единственным хорошим общим термином, который вы могли бы использовать для их описания, была бы функция).
- person BoltClock; 05.06.2018
@BoltClock мы на самом деле делаем именно это. ясно, что они стоят в стороне из-за двоеточия. псевдоселектор — это всего лишь условное обозначение, под которое они оба подпадают. mdn делает это: developer.mozilla.org/ en-US/docs/Learn/CSS/Introduction_to_CSS/
- person albert; 05.06.2018
Это не отвечает на вопрос, в чем конкретно разница между
:after и ::after. Ожидаем ли мы другого поведения при использовании того или другого.
- person Boris D. Teoharov; 27.07.2018
@BorisD.Teoharov В частности, вы можете использовать
:after и ::after взаимозаменяемо с одинаковым поведением, за исключением IE8, для которого, как указано в вопросе, требуется одиночное двоеточие.
- person Dominic; 31.07.2018
Селекторы 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).
person
S.Serpooshan
schedule
10.01.2018
