Какие селекторы CSS вы знаете?

• Универсальный селектор (*) - выбирает все элементы.
• Селектор типа (элемент) - выбирает элементы заданного типа.
• Селектор класса (.класс) - выбирает элементы с заданным классом.
• Селектор идентификатора (#id) - выбирает элемент с заданным идентификатором.
• Селектор атрибута ([атрибут], [атрибут="значение"], [атрибут~="значение"], [атрибут|="значение"], [атрибут^="значение"], [атрибут$="значение"], [атрибут*="значение"]) - выбирает элементы на основе наличия или значения атрибута.
• Псевдоклассы (:hover, :active, :focus, :first-child, :last-child, :nth-child(n), :nth-last-child(n), :only-child, :empty, :not(селектор)) - выбирают элементы в определенном состоянии или положении.
• Псевдоэлементы (::before, ::after, ::first-line, ::first-letter, ::selection) - выбирают части элемента.
• Комбинаторы:
  • Селектор потомка (селектор селектор) - выбирает элементы-потомки первого селектора.
  • Селектор непосредственного потомка (селектор > селектор) - выбирает непосредственных потомков первого селектора.
  • Селектор соседнего брата (селектор + селектор) - выбирает элемент, который является непосредственным братом (следующим) первого селектора.
  • Селектор общего брата (селектор ~ селектор) - выбирает все элементы, которые являются братьями (следующими) первого селектора.

Примеры:

/* Универсальный селектор */
* {
  margin: 0;
  padding: 0;
}

/* Селектор типа */
p {
  line-height: 1.5;
}

/* Селектор класса */
.highlight {
  color: yellow;
}

/* Селектор идентификатора */
#main-header {
  font-size: 2em;
}

/* Селектор атрибута */
[href] {
  text-decoration: none;
}
[type="button"] {
  cursor: pointer;
}

/* Псевдокласс */
a:hover {
  text-decoration: underline;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

/* Псевдоэлемент */
p::first-letter {
  font-weight: bold;
}

/* Комбинаторы */
div p {
  margin-bottom: 10px; /* Параграфы внутри div */
}
ul > li {
  list-style: none; /* Непосредственные потомки li внутри ul */
}
h2 + p {
  margin-top: 5px; /* Параграф, который сразу идет после h2 */
}
h3 ~ p {
  color: gray; /* Все параграфы после h3 */
}