A diferença entre pseudoclasses e pseudoelementos
(1) Classe, nome de classe definido pelo usuário Esta classe é específica e visível, como div.div0 Selecione o elemento div com classe div0.
(2) Pseudoclasse, usada para adicionar efeitos especiais a determinados seletores. Os estilos definidos com pseudoclasses não atuam na marca, mas sim no estado da marca, como :hover para a tag a e :disabled para o elemento form.
(3) Elementos, como div, p, h1, etc., são elementos reais.
(4) Pseudoelementos são elementos que não existem em HTML e são usados apenas para renderização em CSS. Pseudoelementos criam um contêiner virtual. Este contêiner não contém nenhum elemento DOM, mas pode conter conteúdo. Como ::antes, ::depois.
Seletor de pseudoclasse
O objetivo das pseudoclasses é usar seletores para encontrar informações que não existem na árvore DOM e que não podem ser obtidas por seletores CSS regulares. As pseudoclasses geralmente representam um "estado". Uma pseudoclasse começa com dois pontos: seguido pelo nome da pseudoclasse e parâmetros opcionais entre parênteses.
pseudoclasse âncora
Se você definir os quatro estados de uma tag, a ordem deverá ser LVHA, ou seja: link, :visited, :hover, :active.
Em circunstâncias normais, você só precisa definir o efeito padrão da tag a e o efeito do cruzamento do mouse, a{}, a:hover{}.
seletor de pseudoclasse de destino
:target Estilo de destino após o hiperlink Quando um hiperlink é usado, o destino do link pode ser definido com o seletor de destino. O estilo correspondente será exibido somente após o destino ser saltado.
O valor do atributo href da tag a pode apontar para o endereço do link, o id da tag ou o nome da tag a.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>Botão 1</a></ p><p><ahref=#news2>Botão 2</a></p><aname=news1>Conteúdo 1</a><divid=news2>Conteúdo 2</div>Ao clicar no botão 2, o resultado é exibido:
Seletor de pseudoclasse de elemento de formulário
:in-range funciona apenas em elementos que podem especificar valores de intervalo, como os atributos min e max no elemento de entrada;
:invalid funciona apenas em elementos que podem especificar valores de intervalo, como os atributos min e max no elemento |input, o campo de email correto, campos numéricos legais, etc.
Seletor de pseudoclasse estrutural
<style>p:first-child{color:red;}/*O primeiro elemento é h1, portanto não está selecionado*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*O quarto elemento é span, portanto não está selecionado*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/* O 7º p está selecionado, mas o estilo é sobrescrito*/p:only-of-type{color:orange;}/*O 7º e o 8º p estão selecionados*/</style><h1>Título 1</ h1 ><p>O primeiro p</p><p>O segundo p</p><span>Conteúdo de texto</span><p>O terceiro p</p><p>O quarto p</p> <p><i>Conteúdo do texto</i>O quinto p</p><p>O sexto p</p><h5>Título 5</h5><div><p >O sétimo p</p </div><div><p>O oitavo p</p><span>Conteúdo do texto</span></div><div><p>O nono p </p><p>O décimo p </p></div>Resultados em execução:
Negar seletores de pseudoclasse
Pseudoelemento
Pseudoelementos criam alguns elementos abstratos na árvore DOM. Esses elementos abstratos não existem na linguagem do documento (podem ser entendidos como código-fonte HTML). Por exemplo: a interface do documento não fornece um mecanismo para acessar a primeira palavra ou linha do conteúdo do elemento, mas os pseudoelementos permitem que os desenvolvedores extraiam essas informações. Além disso, alguns pseudoelementos permitem aos desenvolvedores obter conteúdo que não existe no documento de origem. Um pseudoelemento começa com dois dois pontos::, seguidos do nome do pseudoelemento.
Simplificando, os pseudoelementos criam um contêiner virtual que não contém nenhum elemento DOM, mas pode conter conteúdo.
No seletor de pseudoelemento em CSS3 e no seletor de pseudoclasse em CSS2, antes e depois são exatamente iguais.
Existem apenas os seguintes pseudoelementos:
O atributo content é usado com os pseudoelementos :before e :after para inserir o conteúdo gerado. Você pode usar pseudoclasses + pseudoelementos.
Peso do estilo CSS
regras de prioridade CSS:
(1) Quando os valores de peso das regras de seleção CSS forem diferentes, terá precedência aquele com maior valor de peso;
(2) Quando os valores de peso das regras de seleção CSS são iguais, a regra definida posteriormente tem precedência;
(3) Quando !importand for adicionado após o atributo CSS, será dada prioridade absoluta incondicional;
Cálculo do valor do peso: