Pseudo do CSS-elements (pseudo-elementos)

Pseudo do CSS-Os pseudo-elementos elements é uma palavra-chave adicional ao final do seletor, que permite que você modifique o estilo de partes específicas do elemento escolhido. Nota: em comparação com os pseudo-elementos, pseudo-As classes (pseudo-classes) podem mudar o estilo dos elementos com base no estado.

Os pseudo-elementos do CSS são uma maneira de estilizar elementos do documento que não estão definidos por uma posição específica na árvore do documento.

O que são pseudo-elementos

Os pseudo-elementos do CSS permitem que você defina estilos para elementos ou partes de elementos sem adicionar nenhum ID ou classe. Isso é muito útil em situações onde você deseja aplicar estilos a apenas a primeira letra de um parágrafo para criar um efeito de descida da primeira letra, ou inserir conteúdo antes ou depois do elemento usando uma tabela de estilo, etc.

CSS3 A sintaxe de dois dois-pontos (::) foi introduzida para pseudo-elementos para distinguir pseudo-elementos de pseudo-classes. A nova sintaxe dos pseudo-elementos pode ser fornecida da seguinte forma:

Estes são os pseudo-elementos mais comuns usados:

::first-pseudo-elemento line da primeira linha

O::first-O pseudo-elemento line aplica estilos especiais à primeira linha do texto.

As regras de estilo no exemplo a seguir definem o formato do primeiro linha do parágrafo. O comprimento da primeira linha depende do tamanho da janela do navegador ou do elemento contido.

p::first-line {
　　　　color: #ff0000;
　　　　font-variant: small-caps;
}

:: first-pseudo-elemento letter

::first-O pseudo-elemento letter é usado para adicionar estilos especiais à primeira letra da primeira linha do texto. No exemplo a seguir, as regras de estilo definem o formato da primeira letra do parágrafo e criam um efeito semelhante ao de descida da primeira letra.

p::first-letter　{
　　　　color: #ff0000;
　　　　font-size:　xx-large;
}

:: before e :: after pseudo-elementos

::before e ::after pseudo-elementos podem ser usados para inserir conteúdos gerados antes ou após o conteúdo de um elemento. content Quando combinados com propriedades do CSS, os conteúdos gerados são inseridos.

Isso é muito útil para decorar elementos ricos em conteúdo, que não devem pertencer à marcação real da página. Você pode usar esses pseudo-elementos para inserir strings normais ou objetos incorporados (por exemplo, imagens) e outras recursos.

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

Pseudo-elementos e classes CSS

Normalmente, precisamos usar esses pseudo-elementos para definir algum parágrafo de texto ou outroBlocoEstilo do elemento. Lá, declarar uma classe para o pseudo-elemento funciona. Pseudo-elementos podem ser usados comClasse CSSComposições para gerar efeitos, especialmente para elementos com essa classe.

As regras de estilo no exemplo a seguir mostrarão a primeira letra de todos os parágrafos com class="article" em verde, tamanho xx-large。

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}