Existe alguma diferença funcional entre os pseudo-seletores CSS 2.1 :aftere CSS 3 ::after(além de ::afternão ser suportado em navegadores antigos)? Existe algum motivo prático para usar a especificação mais recente?
Existe alguma diferença funcional entre os pseudo-seletores CSS 2.1 :aftere CSS 3 ::after(além de ::afternão ser suportado em navegadores antigos)? Existe algum motivo prático para usar a especificação mais recente?
Respostas:
É distinção pseudo- classe vs pseudo- elemento .
Exceto para ::first-line, ::first-letter, ::beforee ::after(que foram em torno de um pouco e pode ser usado com dois pontos de solteiro, se você precisar de suporte IE8), pseudo- elementos requerem dois pontos duplos.
As pseudo-classes selecionam os elementos reais em si, você pode usar :first-childou :nth-of-type(n)para selecionar o primeiro ou o específico de <p>uma div, por exemplo.
(E também estados de elementos reais como :hovere :focus.)
Os pseudoelementos têm como alvo uma subparte de um elemento como ::first-lineor ::first-letter, coisas que não são elementos por si só.
Na verdade, melhor descrição aqui: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Também aqui: http://www.evotech.net/blog/2007/ 05 / notação depois de v após o que é duplo-cólon /
:aftere de forma ::afterintercambiável com comportamento idêntico, com exceção do IE8, que, como a pergunta observa, requer dois pontos únicos.
Os seletores CSS, como ::afteralguns elementos virtuais, não estão disponíveis como um elemento explícito na árvore DOM. Eles são chamados de " pseudo-elementos " e são utilizadas para inserir algum conteúdo antes / depois de um elemento (por exemplo: ::before, ::after) ou, seleccionar uma parte de um elemento (por exemplo: ::first-letter). Atualmente há apenas 5 elementos pseudo padrão: after, before, first-letter, first-line, selection.
Por outro lado, há outros tipos de selectores denominados " pseudo-classes ", que são utilizadas para definir um estado especial de um elemento (tal como como :hover, :focus, :nth-child(n)). Isso selecionará todo um elemento existente no DOM. As pseudo classes são uma lista longa com mais de 30 itens.
Inicialmente (em CSS2 e CSS1), a sintaxe de dois pontos foi usada para pseudo-classes e pseudo-elementos. Mas, no CSS3, a ::sintaxe substituiu a :notação de pseudo-elementos para melhor distingui-los.
Para compatibilidade com versões anteriores, a sintaxe antiga de dois pontos é aceitável para pseudoelementos como as :after(os navegadores ainda suportam a sintaxe antiga com um ponto e vírgula). Somente o IE-8 não suporta a nova sintaxe (use dois pontos, se desejar oferecer suporte ao IE8).