Resumo dos seletores CSS comumente usados

Uma leitura obrigatória para zero noções básicas de HTML - começando com HTML, a programação é tão simples

1. Seletor primário

1. Nomeie o seletor com o nome da tag, como p{ }
2. Com seletor #id como #one{ ]
3. Com seletor de nome de classe ., como .box
4. Seletores curinga como { } podem ser usados ​​para limpar o estilo padrão
5. Use espaços para descer o seletor (pai, descendente...), como div box p{ }
6. Para, seletores paralelos (múltiplos seletores usam o mesmo estilo), como p,span,li{ }
7. O seletor > descendente é comumente usado (o intervalo exato é minúsculo = alguns, mais preciso), como div>ul>.li1 { }
8. Use ~ para associar o seletor (brother~ segue todos os irmãos mais novos)
9. Take + seletor de irmão adjacente (irmão + próximo a um irmão mais novo)

2. Seletor de atributos

• Selecione por atributo

Por exemplo: a[target]{color: red; }
selecione a tag com o atributo target na tag a e adicione um estilo de fonte vermelho

• Selecione por atributos e restrinja a seleção por valores de atributos

Por exemplo: a[target$="k"]{ color: green; }
Encontre a tag com o atributo target da tag a e o valor do atributo termina com k

Por exemplo: a[href^="h"]{color: pink; }
Encontre uma tag que tenha o atributo href da tag a e tenha um valor de atributo começando com h.

Por exemplo: a[target*="se"]{ color: skyblue; }
Encontre uma tag que tenha o atributo target da tag a e contenha o valor do atributo dos dois caracteres se

3. Seletor de pseudoclasse

3.1 Classe de status

O estilo de um elemento muda em um estado específico

Estado do rato:

1. :hoverEstado de passagem do mouse comumente usado
2. :activeEstado do clique do mouse

Para uso somente com a tag a:

3. linkLinks não visitados ( usados ​​apenas por uma tag )
4. :visitedLinks que foram visitados ( apenas para a tag a )

Somente no estado de controle do formulário de entrada:
5. :focusQuando a caixa de entrada do formulário está em foco (o estilo padrão deve ser desmarcado primeiro)
6. :checkedQuando o formulário está marcado (seleção única/seleção múltipla)

3.2 Classe de estrutura

Estrutura: Seletor de elemento filho:nth-child(n)

1. O pai seleciona um dos seguintes filhos: nth-child(n)
   tal como:ul>li:nth-child(3)
2. Selecione o primeiro elemento filho, primeiro filho do elemento pai,
   como:ul>li:first-child
3. Selecione o último elemento filho, último filho do elemento pai,
   como:ul>li:last-child
4. Selecione todos os elementos ímpares ímpares/2n-1 do elemento pai,
   como:ul>li:nth-child(2n-1)或 ul>li:nth-child(odd)
5. Selecione todos os elementos pares pares / 2n do elemento pai,
   como:ul>li:nth-child(2n)或 ul>li:nth-child(even )
6. Selecione vários elementos especificados ao mesmo tempo, usando o seletor paralelo (,) no meio,
   como:li:nth-child(1),li:nth-child(4)
7. Indica a seleção do mês ao último,
   como:ul>li:nth-child(n+3)

4. Seletor de pseudoelemento

4.1 Como escrever seletores de pseudoelementos

• E::before é equivalente a adicionar um subelemento extra na frente do elemento E,
  como:p::before{content:"Hello World!"}
• E::after é equivalente a adicionar um subelemento extra no final do elemento E.
  Por exemplo,p::after {content:"Hello World!"}
::afte é frequentemente usado para limpar carros alegóricos. O problema do colapso de altura em carros alegóricos foi discutido no Capítulo 10.

4.2 Nota

• Você deve ter contentestilos para que os dois pseudoelementos acima tenham efeito.
• O elemento filho criado deve ser um elemento inline .
• contentAlém de escrever texto, você também pode usar url para especificar uma imagem e outros métodos de escrita.

4.3 A diferença entre seletores de pseudoclasse e seletores de pseudoelemento

• O seletor de pseudoclasse equivale a adicionar um nome de classe virtual sob certas circunstâncias, enquanto o seletor de pseudoelemento equivale a criar um elemento virtual.
• Pseudo classe: modificará apenas o estilo do estado do elemento. (Use um :)
• Classe de pseudoelemento: Cria um novo elemento virtual. (Use dois ::)

5. Comparação prioritária de estilos

!importante > estilos embutidos > id > descendentes > classe | atributos | pseudoclasses |
pseudoelementos > tags | + (adjacente) | ~ (associado) | > * curinga

Resumir

Acima estão alguns dos seletores mais importantes em CSS que o editor compilou para você e os resumiu por categoria. Ele foi compilado com referência a diversas fontes e ao meu próprio entendimento. Caso haja imprecisões e omissões, espero que vocês possam me esclarecer e fazer correções. Gostaria de agradecer antecipadamente.