Tanto os pseudoelementos quanto as pseudoclasses são definidos anexando uma palavra-chave específica após o seletor, seguindo regras de sintaxe semelhantes e definindo estilos correspondentes em blocos de regras CSS. Os pseudoelementos podem adicionar ou substituir conteúdo por meio do atributo content. Por exemplo, :before e :after podem inserir texto, imagens ou outro conteúdo gerado. As pseudoclasses afetam apenas o estilo de um elemento, mas não adicionam ou modificam conteúdo. Eles alteram o comportamento dos elementos com base na interação do usuário, na estrutura do documento ou em outras condições lógicas. As principais diferenças são as seguintes:
Objetos alvo :
Seletores de pseudoclasses (Pseudoclasses) atuam em elementos reais existentes e são usados para descrever um status ou relacionamento específico do elemento, como o status de acesso do link ( :visited ), o status de passar o mouse ( :hover ), e se é um documento o primeiro elemento filho em ( :first-child ), etc. Eles não alteram diretamente a estrutura do elemento, mas afetam o comportamento do elemento sob condições específicas. Pseudoelementos são usados para criar e selecionar uma parte específica dentro de um elemento ou para gerar novos nós de conteúdo virtual antes e depois de um elemento. Por exemplo, :before e :after podem ser usados para inserir conteúdo adicional, :first-line e :first-letter selecionam a primeira linha do texto e a primeira letra do elemento respectivamente, :marker controla o estilo de marca do item da lista, etc. . Esses pseudoelementos não correspondem aos elementos reais do documento HTML, mas estilos podem ser aplicados a eles como se fossem partes reais do documento.
Identificador gramatical :
Pseudoclasses são geralmente identificadas por dois pontos : :), como :hover , :focus . Os pseudoelementos são identificados em CSS3 por dois dois pontos consecutivos ( :: ) para distingui-los das pseudoclasses em versões mais antigas do CSS. Embora a maioria dos navegadores modernos ainda aceite dois pontos simples para representar pseudoelementos (como :before ), para cumprir os padrões W3C e manter as melhores práticas, é recomendado o uso de dois pontos duplos, como ::before , ::after .
Reutilização :
Pseudoclasses podem ser combinadas no mesmo seletor, como a:hover:focus para representar um link que é pairado e focado. Geralmente, os pseudoelementos não podem aparecer repetidamente no mesmo seletor porque representam uma parte específica do elemento ou novo conteúdo gerado. Um elemento só pode ter um pseudoelemento :before ou :after em vigor ao mesmo tempo.
Pseudoelementos CSS3 são seletores CSS especiais que permitem aos desenvolvedores adicionar ou modificar os estilos de partes específicas de um elemento por meio de CSS sem modificar a estrutura HTML, ou gerar e controlar conteúdo virtual dentro ou fora do elemento. A seguir está uma explicação detalhada e exemplos de aplicação de vários pseudoelementos CSS3 comuns:
1 :before e :after
:before e :after criam, respectivamente, um novo "elemento filho" invisível, sem conteúdo e após a área de conteúdo do elemento selecionado. Então, ao definir estilos (como conteúdo, tamanho, cor, plano de fundo, etc.) para esse pseudoelemento, ele se torna visível e aparece visualmente como a parte que segue imediatamente o conteúdo do elemento original. Esses conteúdos são definidos pelo atributo content e estilos adicionais podem ser aplicados.
gramática :
seletor:antes {
content: "..." /* ou outro valor */;
/* Outras declarações de estilo */
}
seletor:depois {
content: "..." /* ou outro valor */;
/* Outras declarações de estilo */
} Dentre eles, o atributo content é a chave para definir o conteúdo gerado pelos pseudoelementos. Pode aceitar os seguintes valores:
String : Especifique diretamente o texto a ser exibido. Entidades HTML entre aspas : como content: "—"; ; URL : Insira recursos de imagem, como content: url(image.png); Gere palavras-chave de conteúdo : como content: counter(name); (counter) ou content: attr(attribute-name); ;
Exemplos de aplicação :
1.1. Adicione conteúdo decorativo
Adicione citações, ícones ou outros elementos decorativos.
Adicione aspas:
citação em bloco: antes {
conteúdo: aspas abertas;
tamanho da fonte: maior;
cor: #666;
}
citação em bloco: depois de {
conteúdo: aspas fechadas;
}Adicione ícones personalizados antes/depois dos itens da lista:
li:antes {
conteúdo: url(icon-marca de verificação.svg);
margem direita: 0,5em;
}
li.completed:depois {
content: "2713" /* Caractere Unicode: marca de seleção */
cor: verde;
tamanho da fonte: 1,5em;
alinhamento vertical: super;
}1.2. Flutuação clara
:after é frequentemente usado para criar um elemento vazio em nível de bloco e é usado com clear:both para limpar o impacto da flutuação em elementos subsequentes e evitar o problema de "colapso de altura".
.clearfix:depois {
contente: "";
exibição: mesa;
claro: ambos;
} Aplique a classe .clearfix aos elementos do contêiner cujos pontos flutuantes internos precisam ser limpos.
1.3. Substitua ou estenda o conteúdo HTML
Usando a função attr() , você pode extrair o valor do atributo do elemento como o conteúdo de :after para obter a exibição dinâmica do texto.
abbr[título]:depois {
conteúdo: "(" attr(título) ")";
tamanho da fonte: menor;
cor: cinza;
} Neste exemplo, quando o mouse passa sobre o elemento abbr com o atributo title , um pequeno colchete cinza contendo o valor do atributo title será exibido.
1.4. Implementar formas e animações complexas
Combinado com content , background , border e outras propriedades, bem como CSS3 transform , transition ou animation , você pode usar :after para criar formas complexas e efeitos de animação.
.button:depois {
contente: "";
display: bloco embutido;
largura: 0;
altura: 0;
borda superior: ⅓em sólido transparente;
borda direita: ⅓em sólido transparente;
borda inferior: ⅓em sólido #007BFF;
borda esquerda: ⅓em sólido transparente;
margem esquerda: 0,½em;
}
.button:hover:depois {
transformar: traduzirY(-0,1em);
transição: transformação 0,2s de facilidade de entrada;
} O código acima cria uma seta suspensa triangular após o elemento .button e implementa uma animação suave para baixo ao passar o mouse.
Coisas a serem observadas
:after deve ser usado com o atributo content , caso contrário não terá efeito. Como :after é um elemento virtual criado, as operações DOM não podem ser executadas através de JavaScript. Embora o conteúdo gerado por :after possa participar do layout, ele não é contado no DOM, não afeta a semântica e não afeta as funções de acessibilidade, como a navegação pelo teclado.
Em resumo, os seletores de pseudoelementos CSS3 enriquecem muito a expressividade do web design, inserindo conteúdo personalizado após o conteúdo do elemento sem alterar a estrutura HTML. O uso proficiente de pseudoelementos e outras técnicas CSS pode ajudar os desenvolvedores a construir interfaces web mais bonitas, responsivas e fáceis de manter.
2 :first-line e :first-letter
O seletor de pseudoelemento :first-line é usado para estilizar a primeira linha do texto dentro do elemento, enquanto o pseudoelemento :first-letter é usado para estilizar a primeira letra dentro do elemento.
gramática :
seletor: primeira linha {
/* Declaração de estilo */
}
seletor: primeira letra {
/* Declaração de estilo */
}Exemplos de aplicação :
Recuo da primeira linha:
artigo p:primeira linha {
recuo do texto: 2em;
}Capitalização e decoração:
artigo h2:primeira letra {
tamanho da fonte: 2em;
flutuar: esquerda;
margem direita: 0,5em;
altura da linha: 0,8;
cor: #8A2BE2;
cor de fundo: #F8F8FF;
preenchimento: 0,⅔em 0,⅓em;
raio da borda: 0,5em;
}O seletor de pseudoclasse CSS3 é uma ferramenta poderosa que permite aos desenvolvedores posicionar e aplicar estilos com precisão com base no estado de um elemento, em vez de sua posição na árvore do documento ou atributos inerentes, como classe e ID. Esses seletores usam estruturas de sintaxe especiais para descrever diferentes estados condicionais de elementos, como interação do usuário, relacionamentos posicionais, características de conteúdo, etc., obtendo assim um web design dinâmico e responsivo. Abaixo está uma explicação detalhada dos seletores de pseudoclasse CSS3 e exemplos de suas aplicações práticas.
1. Seletor de pseudoclasse estático
:link e :visited
:link : Usado para selecionar hiperlinks (elementos <a> ) que não foram visitados pelo usuário. Normalmente usado para definir estilos básicos para links não visitados.
a: link {
cor: azul;
decoração de texto: nenhuma;
} :visited : Selecione os links que o usuário visitou. Usado para definir estilos diferenciados para links visitados.
a:visitou {
cor: roxo;
} 2. Seletores de pseudoclasse de interação do usuário :hover , :focus , :active
:hover : Corresponde a um elemento quando o ponteiro do mouse está pairando sobre ele.
botão: passar o mouse {
cor de fundo: #f0f0f0;
cursor: ponteiro;
} :focus : Selecione o elemento que recebe o foco, comumente encontrado em controles de formulário ou elementos focáveis (como <input> , <textarea> , <button> , etc.).
entrada: foco {
contorno: 2px sólido #007BFF;
sombra da caixa: 0 0 0 0,2rem rgba(0, 123, 255, 0,25);
} :active : Usado para indicar que o usuário está ativando ou pressionando um elemento (geralmente com um clique do mouse ou pressionando uma tela sensível ao toque).
a:ativo {
cor: vermelho;
peso da fonte: negrito;
} 3. Seletores de pseudoclasse estruturados :first-child , :last-child , :only-child , :nth-child(n) , etc.
:first-child : seleciona o elemento que é o primeiro filho de seu elemento pai.
li:primeiro filho {
tipo de estilo de lista: quadrado;
} :last-child : seleciona o elemento que é o último filho de seu elemento pai.
div > p:último-filho {
margem inferior: 0;
} :only-child : Seleciona elementos que não possuem irmãos.
.message:filho único {
largura da borda: 2px;
} :nth-child(n) : Selecione o enésimo elemento filho de seu elemento pai, onde n pode ser um número, palavra-chave ( even , odd ) ou fórmula (como 2n+1 ).
li:nésimo-filho(2n) {
cor de fundo: #f9f9f9;
}4. Seletores de pseudoclasse relacionados ao conteúdo
:empty , :target , :enabled , :disabled , :checked , etc.
:empty : Seleciona elementos sem qualquer conteúdo (incluindo elementos filhos, nós de texto, etc.).
div.empty:vazio {
exibição: nenhum;
} :target : Selecione o elemento cujo identificador de fragmento de URL atual (hash) corresponde ao ID do elemento.
#content:alvo {
cor de fundo: amarelo claro;
} :enabled e :disabled: Selecione os elementos do formulário nos estados habilitado e desabilitado respectivamente.
entrada: habilitado {
cor de fundo: branco;
}
entrada:desativado {
opacidade: 0,6;
cursor: não permitido;
} :checked : Usado quando uma caixa de seleção ( <input type="checkbox"> ), botão de opção ( <input type="radio"> ) ou elemento <option> é selecionado.
input[type="checkbox"]:marcado + rótulo {
decoração de texto: line-through;
}5. Negar seletores de pseudoclasse
:not(selector)
:not() : seleciona elementos que não correspondem ao seletor especificado entre parênteses.
/* Exceto todos os parágrafos com classe "exclude" */
p:não(.excluir) {
cor: verde;
}6. Outros seletores de pseudoclasse
:root , :nth-of-type(n) , :nth-last-of-type(n) , :first-of-type , :last-of-type , :only-of-type etc.
:root : Selecione o elemento raiz do documento (geralmente o elemento <html> em documentos HTML).
:raiz {
--cor primária: #3498db;
} :nth-of-type(n) e :nth-last-of-type(n): Semelhante a :nth-child(n) , mas apenas para elementos filhos de um tipo específico entre elementos irmãos.
artigo:enésimo-do-tipo(par) {
cor de fundo: #f5f5f5;
} :first-of-type , :last-of-type e :only-of-type: selecionam respectivamente o primeiro, último ou único elemento filho de um tipo específico entre os elementos irmãos.
div > p: primeiro do tipo {
peso da fonte: negrito;
}Ao dominar os seletores de pseudoclasse CSS3 acima e seus cenários de aplicação, os desenvolvedores podem escrever código CSS mais eficiente, expressivo e interativo para melhorar a experiência do usuário e os efeitos visuais do site. À medida que o padrão CSS continua a evoluir, mais novos seletores de pseudoclasse podem se juntar às fileiras do CSS3 para fornecer métodos de controle mais ricos e sofisticados para o desenvolvimento front-end.
Seja uma pseudoclasse ou um pseudoelemento, todos eles são projetados para aprimorar a funcionalidade dos seletores CSS, permitindo que os desenvolvedores controlem com mais precisão o estilo e o layout dos elementos sem alterar a estrutura HTML.
Isso conclui este artigo sobre as diferenças, explicações detalhadas e exemplos de aplicação de pseudoelementos e seletores de pseudoclasse CSS3. Para obter mais informações sobre pseudoelementos e seletores de pseudoclasse CSS3, pesquise artigos anteriores em downcodes.com ou continue navegando. Artigos relacionados abaixo, espero que você apoie downcodes.com no futuro!