CSS introduz os conceitos de pseudoclasses e pseudoelementos para formatar informações além da árvore do documento. Em outras palavras, pseudoclasses e pseudoelementos são usados para modificar partes que não estão na árvore do documento, como a primeira letra de uma frase, ou o primeiro elemento de uma lista, ou quando o mouse está passando sobre um determinado O estilo a ser definido quando o hiperlink estiver ativado.
O que são pseudoelementos?
Pseudoelementos: usados para criar alguns elementos que não estão na árvore do documento e adicionar estilos a eles. Na verdade, pseudoelementos são coisas que não podem ser feitas por seletores comuns antes ou depois de certos elementos. O conteúdo do controle é igual ao do elemento, mas ele próprio é uma abstração baseada em elemento e não existe na estrutura do documento. Por exemplo, podemos usar :before para adicionar algum texto na frente de um elemento e adicionar estilos a este texto.
Características do elemento
1. Vantagens:
(1) Não ocupe nós DOM e reduza o número de nós DOM.
(2) Deixe o CSS ajudar a resolver alguns problemas de JavaScript e simplificar o desenvolvimento.
(3) Evite adicionar elementos de página sem sentido.
2. Desvantagens:
(1) Não propício à depuração.
(2) Os pseudoelementos não são realmente refletidos no conteúdo do documento, mas apenas no efeito visual, portanto, você não pode adicionar conteúdo prático aos pseudoelementos, e esta parte do conteúdo não será rastreada pelos mecanismos de busca.
CSS fornece uma série de pseudoelementos, conforme mostrado na tabela a seguir:
1. ::depois
O pseudoelemento::after pode inserir algum conteúdo após o elemento especificado Em ::after, você precisa usar o atributo content para definir o conteúdo a ser anexado, e em ::after, você deve definir o atributo content para ter efeito. (nenhum conteúdo precisa ser inserido) O valor do atributo content pode ser definido como vazio).
2. ::antes
O pseudoelemento::before pode inserir algum conteúdo antes do elemento especificado. Semelhante a ::after, o atributo content também precisa ser usado em ::before para definir o conteúdo a ser anexado, e o atributo content deve ser definido em ::before para ter efeito (quando não há conteúdo a ser inserido, o valor do atributo content pode ser definido como nulo).
3. ::primeira letra
Pseudo element::first-letter é usado para definir o estilo do primeiro caractere do conteúdo no elemento especificado. Geralmente é usado com atributos font-size e float para criar um efeito de capitulação. Deve-se notar que o pseudoelemento ::first-letter só pode ser usado para elementos de nível de bloco. Se os elementos inline quiserem usar este pseudoelemento, eles precisam ser convertidos primeiro em elementos de nível de bloco.
4. ::primeira linha
O pseudo element::first-line é usado para definir o estilo da primeira linha do conteúdo no elemento especificado. Semelhante a ::first-letter, o pseudo element::first-line só pode ser usado para elementos de nível de bloco. Se os elementos embutidos quiserem usar este pseudoelemento, primeiro você precisa convertê-lo em um elemento de nível de bloco.
5. ::seleção
Pseudo element::selection é usado para definir o estilo quando o objeto é selecionado. Deve-se observar que o pseudo element::selection só pode definir a cor, fundo, cursor, contorno e sombra do texto quando o elemento é selecionado (IE11). ainda não suporta Definir este atributo) e outros atributos.
6. ::espaço reservado
Pseudo element::placeholder é usado para definir o texto do espaço reservado (texto definido através do atributo placeholder do HTML) dos elementos do formulário (elementos <input>, <textarea>).