Guia detalhado para seletores CSS e exemplos de código

O que são seletores CSS?

Seletores CSS são usados para selecionar elementos HTML a serem estilizados. Os seletores CSS selecionam elementos HTML com base em seu id, classe ou atributos.

seletor básico

Seletor universal:

*O símbolo é usado para selecionar todos os elementos da página. A maioria dos desenvolvedores desejará redefinir as margens e o preenchimento para 0 para eliminar as margens e o preenchimento fornecidos pelo navegador por padrão. Isso ajuda a manter a consistência entre os navegadores ao visitar um site.

gramática:

*{
    
    
      // 设置元素样式
 }

Exemplo HTML:

<body>
<h1>通用选择器示例</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>

Exemplo de CSS:

*{
    
    
  background: black;
  color: white;
  font-family: 'Poppins';
}

h1{
    
    
  text-align: center;
}

Seletor de classe:

Os seletores de classe são usados para selecionar todos os elementos pertencentes a um atributo de classe específico. Para selecionar elementos com uma classe específica, use o caractere ponto final (.) que representa o nome da classe, ou seja, ele corresponderá aos elementos HTML com base no conteúdo do atributo da classe.

gramática:

.class {
    
    
    // CSS属性
}

Exemplo HTML:

<body>
<div class="intro">
  <p>My name is Donald.</p>
  <p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

<p class="intro">My best friend is Mickey.</p>
</body>

Exemplo de CSS:

.intro{
    
    
  background: skyblue;
}

Seletor de ID:

O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id do elemento na página é único, então o seletor de id é usado para selecionar um elemento único! Para selecionar um elemento com um id específico, escreva um caractere cerquilha (#) seguido do id do elemento.

gramática:

#idname {
    
    
  // 样式属性
}

Exemplo HTML:

<body>
  <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>

Exemplo de CSS:

#paragraph{
    
    
  background: skyblue;
}

Seletor de tipo:

O seletor de tipo às vezes é chamado de seletor de nome de tag ou seletor de elemento porque seleciona tags/elementos HTML no documento.

gramática:

element{
    
    
// 设置元素样式
}

Exemplo HTML:

<body>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
</body>

Exemplo de CSS:

span{
    
    
  background: skyblue;
}

seletor de grupo

Os seletores de agrupamento CSS são usados para selecionar vários elementos e estilizá-los juntos. Isso reduz o código e o trabalho extra necessário para declarar estilos comuns para cada elemento. Para agrupar seletores, separe cada seletor com uma vírgula.

gramática:

element, element{
    
    
// 设置元素样式
}

Exemplo HTML:

<body>
<h1>分组选择器示例</h1>
<p>示例CSS选择器。</p> 
<h4>示例CSS选择器分组。</h4> 
</body>

Exemplo de CSS:

h1{
    
    
  text-align: center;
}

p,h4{
    
    
  background: skyblue;
}

Combinador

Combinadores são usados para explicar relacionamentos entre seletores. Existem quatro combinadores diferentes em CSS:

Seletor descendente (espaço)
Seletor filho (>)
Seletor de irmão adjacente (+)
Seletor de irmãos universal (~)

Combinador descendente (espaço)

Combinadores descendentes, geralmente representados por um caractere de espaço (" "), combinam dois seletores de modo que, se o elemento correspondente ao segundo seletor tiver um elemento ancestral (elemento pai, elemento pai) que corresponda ao elemento pai do primeiro seletor, o elemento pai do elemento pai, etc.), os seleciona.

gramática:

selector1 selector2 {
    
    
  /* 属性声明 */
}

Exemplo HTML:

<body>
<div>
  <p>div中的段落1。</p>
  <p>div中的段落2。</p>
  <section><p>div中的段落3。</p></section>
</div>

<p>段落4。不在div中。</p>
<p>段落5。不在div中。</p>
</body>

Exemplo de CSS:

div p{
    
    
background: skyblue;
}

subcombinador(>)

Os subcombinadores usam o sinal de maior que (>) como separador entre os elementos. Seleciona os descendentes diretos do elemento pai. Este combinador corresponde apenas a elementos filhos diretos na árvore do documento. É mais rigoroso que o seletor descendente porque o segundo seletor só será selecionado se o primeiro seletor for seu elemento pai.

gramática:

selector1 > selector2 
{
    
    
   // 样式属性
}

Exemplo HTML:

<body>
<h1>子组合器示例</h1>

<p>子选择器（>）选择指定元素的所有子元素。</p>

<div>
  <p>div中的段落1。</p>
  <p>div中的段落2。</p>
  <section>
    <!-- 不是子元素，但是后代元素 -->
    <p>div中的段落3（在section元素内）。</p>
  </section>
  <p>div中的段落4。</p>
</div>

<p>段落5。不在div中。</p>
<p>段落6。不在div中。</p>
</body>

Exemplo de CSS:

div>p{
    
    
  background: skyblue;
}

Combinador de Irmãos Adjacentes (+)

Combinadores irmãos adjacentes usam o sinal de mais (+) como separador entre os elementos. O segundo elemento só será correspondido se seguir imediatamente o primeiro elemento e ambos forem filhos do mesmo elemento pai. Este seletor irmão seleciona elementos adjacentes, ou podemos dizer, elementos localizados próximos à tag especificada.

gramática:

former_element + target_element 
{
    
    
   // 样式属性
}

Exemplo HTML:

<body>

<h1>相邻兄弟选择器示例</h1>

<p>+选择器用于选择紧跟在另一个特定元素之后的元素。</p>

<div>
  <p>div中的段落1。</p>
  <p>div中的段落2。</p>
</div>

<p>段落3。在div之后。</p>
<p>段落4。在div之后。</p>

<div>
  <p>div中的段落5。</p>
  <p>div中的段落6。</p>
</div>

<p>段落7。在div之后。</p>
<p>段落8。在div之后。</p>

</body>

Exemplo de CSS:

div + p {
    
    
  background: skyblue;
}

Combinador universal de irmãos (~)

O combinador irmão universal usa o til (~) como separador entre os elementos. Ele seleciona elementos que seguem o primeiro elemento seletor e são todos filhos do mesmo elemento pai. Pode ser usado para selecionar grupos de elementos que possuem um elemento pai comum.

gramática:

former_element ~ target_element 
{
    
    
     // 样式属性
}

Exemplo HTML:

<body>

<h1>通用兄弟组合器示例</h1>

<p>通用兄弟选择器（~）选择指定元素的所有下一个兄弟元素。</p>

<p>段落1。</p>

<div>
  <p>段落2。</p>
</div>

<p>段落3。</p>
<code>一些代码。</code>
<p>段落4。</p>

</body>

Exemplo de CSS:

div ~ p {
    
    
  background-color: skyblue;
}

Pseudo seletor

Pseudoclasse:

Use dois pontos (:) quando o estado do elemento mudar devido à interação do usuário.

gramática:

selector:pseudo-class 
{
    
    
    // property: value;
}

As pseudoclasses comumente usadas incluem:

:foco
:obrigatório
:verificado
:desabilitado
:flutuar
:visitado
:ativo

Essas pseudoclasses estão relacionadas à posição dos elementos na árvore do documento:

:raiz
:primeiro filho
:último filho
:filho único
:n-ésimo filho(n)
:nésimo-último-filho(n)
:não (seletor)

Pseudoelementos:

Os dois pontos duplos (::) são usados para estilizar uma parte específica do elemento selecionado.

gramática:

selector::pseudo-element 
{
    
    
  // property: value;
}

Os pseudoelementos comumente usados incluem:

::depois
::antes
::primeira linha
::primeira letra (:primeira letra)
::primeira linha (:primeira linha)
:: botão seletor de arquivo

seletor de atributos

Os seletores de atributos CSS combinam elementos com base na presença ou valor de um determinado atributo.

[attr] representa um elemento com o nome do atributo attr.

[attr=value] representa um elemento com nome de atributo attr e valor exatamente valor.

[attr~=value] representa um elemento com um nome de atributo attr e um valor que é uma lista de palavras separadas por espaço, uma das quais é valor.

[attr|=value] significa um elemento com um nome de atributo attr e o valor pode ser exatamente valor, ou começa com valor e é seguido por um hífen. É comumente usado para correspondência de subcódigo de idioma.

[attr^=value] representa um elemento com um nome de atributo attr e um valor prefixado (prefixado) com valor.

[attr$=value] representa um elemento com um nome de atributo attr e um valor com value como sufixo (suffix).

[attr*=value] representa um elemento com um nome de atributo attr e um valor que contém pelo menos uma ocorrência de valor.

[valor do operador de atributo i] Adicionar i (ou I) antes do colchete de fechamento causa uma comparação dos valores sem distinção entre maiúsculas e minúsculas (para caracteres no intervalo ASCII).