O . é o elemento que contém class="" ... Quando utilizamos class="" no HTML então no CSS chamamos o elemento com . (ponto), exemplo:
HTML
<div class="fundo-vermelho">Aqui vai ser um fundo vermelho colocado via class</div>
CSS
.fundo-vermelho{
background:red;
}
Com # (cerquilha/jogo da velha) é a mesma coisa só que se aplica a ID. Quando no HTML usamos id então no CSS usamos #
HTML
<div id="fundo-azul">Aqui vai ser um fundo azul colocado via ID</div>
CSS
.fundo-azul{
background:blue;
}
Quando usamos 2 elementos seguindos como e1 e2 quer dizer que vamos aplicar o comando CSS dentro do elemento e2 que está dentro de e1
HTML
<div class="box">
<div class="conteudo">
Esse é o conteúdo
</div>
</div>
CSS
.box .conteudo{
font-weight:bold;
background:pink
}
Quando separamos o elemento por vírgula, quer dizer que os estilo que estamos aplicando a um vamos aplicar também para o outro
HTML
<div id="elemento1">Elemento 1</div>
<div class="elemento2">Elemento 2</div>
<div id="elemento3">Elemento 3</div>
CSS
#elemento1, .elemento2, #elemento3{
background:red;
}
Quando se usa o elemento * então vamos aplicar todo o estilo a todos elementos dentro do elemento
Quando não utilizamos . ou # só definimos o nome do elemento então só pode ser que o estilo seja atribuido a tags
HTML
<a href="">Aqui vai ser um fundo vermelho colocado via class</a>
CSS
a{
background:purple;
}
E quando utilizamos algo como :hover (pseudo-elementos) são para aplicar o estilo em partes especificas do elemento. Vou dar um exemplo do link (<a>
)
HTML
<a href="" id="meu-link">Passe o mouse aqui</a>
CSS
#meu-link:hover{
background:red;
}
Os pseudo-elementos são itens especificos, ou seja, não pode ser qualquer nome.