2012-01-24 2 views
91

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

ответ

95

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

для ::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/

+4

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

+1

, если вы не говорите о них обоих. или в общих терминах. – albert

+1

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

0

CSS селекторы как ::after некоторые виртуальные элементы не доступны в качестве явного элемента в DOM дереве. Их называют «Pseudo-Elements» и используются для вставки некоторое содержимое перед/после элемента (например: ::before, ::after) или выберите какую-то часть элемента (например: ::first-letter). В настоящее время существует только 5 стандартных псевдоэлементов: after, before, first-letter, first-line, selection.

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

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

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