Que seletores CSS conhece?

• Seletor universal (*) - seleciona todos os elementos.
• Seletor de tipo (elemento) - seleciona elementos de um tipo específico.
• Seletor de classe (.classe) - seleciona elementos com uma classe específica.
• Seletor de identificador (#id) - seleciona um elemento com um identificador específico.
• Seletor de atributo ([atributo], [atributo="valor"], [atributo~="valor"], [atributo|="valor"], [atributo^="valor"], [atributo$="valor"], [atributo*="valor"]) - seleciona elementos com base na presença ou valor do atributo.
• Pseudo-classes (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(seletor)) - selecionam elementos em um estado ou posição específicos.
• Pseudo-elementos (::before, ::after, ::first-line, ::first-letter, ::selection) - selecionam partes de um elemento.
• Combinadores:
  • Seletor descendente (seletor seletor) - seleciona elementos descendentes do primeiro seletor.
  • Seletor de filho direto (seletor > seletor) - seleciona filhos diretos do primeiro seletor.
  • Seletor de irmão adjacente (seletor + seletor) - seleciona o elemento que é irmão imediato (seguinte) do primeiro seletor.
  • Seletor de irmão geral (seletor ~ seletor) - seleciona todos os elementos que são irmãos (seguintes) do primeiro seletor.

Exemplos:

/* Seletor universal */
* {
  margin: 0;
  padding: 0;
}

/* Seletor de tipo */
p {
  line-height: 1.5;
}

/* Seletor de classe */
.highlight {
  color: yellow;
}

/* Seletor de identificador */
#main-header {
  font-size: 2em;
}

/* Seletor de atributo */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Pseudo-classe */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Pseudo-elemento */
p::first-letter {
  font-weight: bold;
}

/* Combinadores */
div p {
  margin-bottom: 10px; /* Parágrafos dentro de div */
}
ul > li {
  list-style: none; /* Descendentes diretos de li dentro de ul */
}
h2 + p {
  margin-top: 5px; /* Parágrafo que vem imediatamente após h2 */
}
h3 ~ p {
  color: gray; /* Todos os parágrafos após h3 */
}