🎯 Seletores (id, class, tag)

1. Seletor de ID (`#`)

O seletor de ID é usado para estilizar um único elemento com um ID específico. IDs devem ser únicos em uma página HTML.

#meu-id {
    color: blue;
    font-weight: bold;
}

Este parágrafo tem um ID e está estilizado com cor azul e negrito.

2. Seletor de Classe (`.`)

O seletor de classe é usado para estilizar múltiplos elementos que compartilham a mesma classe. Um elemento pode ter várias classes.

.minha-classe {
    background-color: yellow;
    padding: 5px;
}

Este parágrafo tem a classe "minha-classe" e está com fundo amarelo.

Esta div também tem a classe "minha-classe".

3. Seletor de Tag (Elemento)

O seletor de tag (ou elemento) é usado para estilizar todos os elementos de um tipo específico (ex: todos os parágrafos, todas as divs).

p {
    font-size: 18px;
}

Este é um parágrafo comum, estilizado pelo seletor de tag.

Este é um span, que não é afetado pelo seletor de tag `p`.

Exemplo Combinado:

/* Estiliza um parágrafo com a classe "minha-classe" */
p.minha-classe {
    border: 1px solid green;
}

/* Estiliza um elemento com ID "outro-id" que está dentro de uma div */
div #outro-id {
    text-decoration: underline;
}

Este parágrafo tem a classe e também é um parágrafo, então recebe o estilo combinado.

Este parágrafo está dentro de uma div e tem um ID.