Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Seletor de estilo, usado para selecionar elementos HTML na página para adicionar estilos CSS.

Classifique por desempenho de renderização de alto para baixo Seguido pela:

EU IA Seletor #id

Selecione elementos por seu atributo id, diferenciando maiúsculas de minúsculas

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Mas seu uso não é recomendado porque:

• O seletor de id tem prioridade mais alta e é inconveniente para redefinir o estilo.
• O seletor de id é usado principalmente por JS

seletor de classe .class

Através do atributo de classe do elementoestiloO nome da classe do elemento selecionado diferencia maiúsculas de minúsculas

O seletor CSS mais recomendado é que os seletores de classe possuem uma semântica forte e são fáceis de redefinir estilos.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

Várias classes de estilo podem ser adicionadas ao mesmo elemento, separadas por espaços.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

seletor de tags 标签名

Selecione os elementos pelos nomes das tags, sem distinção entre maiúsculas e minúsculas

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

Não recomendado devido ao baixo desempenho do seletor de tags e aos altos custos de manutenção

seletor curinga *

Selecione todos os elementos HTML da página, exceto pseudoelementos. Geralmente é usado para limpar o estilo padrão do navegador, mas não é recomendado porque consome desempenho.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

seletor de atributos [属性]

Selecione elementos com base em seus atributos e valores de atributos. Os atributos não diferenciam maiúsculas de minúsculas e os valores dos atributos diferenciam maiúsculas de minúsculas.

Seletor de pseudoclasse :状态名

Selecione elementos com base em seus diferentes estados

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Use seletores de pseudoclasse em listas

n significa 0,1,2,3,4,5,6,7,8...(É inválido quando n é menor que 1, pois n = 0 não será selecionado)

Use seletores de pseudoclasse em tabelas

• tr:nth-child(odd)：Corresponde às linhas 1, 3 e 5 da tabela, o que equivale atr:nth-child(2n+1)。
• tr:nth-child(even): Corresponde às linhas 2, 4 e 6 da tabela, o que equivale atr:nth-child(2n)。

• Exemplo prático de seletor de pseudoclasse

  • Use:nth-child() para implementar listras de zebra, alinhamento de bordas, realce de lista de intervalo especificado e layout adaptativo de lista dinâmica
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS implementa exibição e ocultação dinâmicas (o maravilhoso uso de :checked e :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Uso: alvo para expandir mais, recolher e alternar entre guiashttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Use: espaço reservado mostrado para obter interação no estilo MaterialDesign
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Use:placeholder-shown para verificar o valor nulo e o prompt não pode estar vazio.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked implementa expansão e colapso
    https://demo.cssworld.cn/selector/9/2-1.php

  • :verificado implementa a troca de guias
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked implementa botões de rádio personalizados, caixas de seleção, interruptores, verificações de rótulos e seleções de rádio de materiais
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Use :valid e :invalid para implementar a validação de formulário nativo
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Use :required e :optional para implementar o texto do prompt de verificação do formulário
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within implementa lista suspensa
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Quando a caixa de entrada estiver focada, destaque o rótulo na frente (veja o método 5 no link)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Passe o mouse para exibir a imagem ampliada ou clique com o mouse para exibir a imagem ampliada
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty oculta elementos vazios e campos ausentes dicas inteligentes
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child implementa animação de carregamento dinâmico multiestado
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen permite a exibição em tela cheia das imagens clicadas
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Seletor de pseudoelemento ::

  Usado para selecionar e estilizar parte de um elemento, em vez de todo o elemento

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before e::after

  Ele precisa ser usado junto com o atributo content para definir o conteúdo antes e depois do elemento. Para obter detalhes, consulte.
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Exemplos práticos comumente usados:

  • Adicione ícones antes e depois dos elementos (a magia de ::before e ::after)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS usa habilmente ::after e ::before para implementar a navegação vertical por categoria
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • css usa habilmente ::after para obter animação de troca de guias
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Iniciais

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line primeira linha

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Arraste o mouse para selecionar a área

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder espaço reservado para texto

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Seletor de relacionamento

  Selecione elementos com base nas relações entre os elementos

  seletor descendente >

  A tag de primeiro nível envolvida em uma tag é sua descendente

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  seletor descendente 空格

  Todas as tags dentro de uma tag são suas descendentes

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  seletor de irmãos ~

  No mesmo elemento pai, selecione o elemento especificadodepoisTodos os elementos do mesmo nível, portanto, a rigor, deveriam ser chamados 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS não 前面兄弟选择器 , você pode consultar o link abaixo para simular a implementação
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  seletor de irmão vizinho +

  Seleciona o próximo elemento imediatamente após um elemento

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Seletor de interseção

  Selecione elementos na página que correspondam a vários seletores ao mesmo tempo

  • Não há espaços entre os seletores (os espaços são seletores descendentes)
  • Se existir um seletor de tags, o seletor de tags deverá ser colocado primeiro

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Seletor de união ,

  Entre múltiplos seletores, desde que um deles seja satisfeito, ele será selecionado.

  • Usado entre vários seletores , separado

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4