CSS Внедрение селекторов (&)

Определение и использование

CSS Внедрение (&) Селекторы используются для применения стилей к элементам в контексте другого элемента.

Внедрение уменьшает потребность в повторении селекторов для связанных элементов.

Пример

Пример 1

До внедрения вам нужно явно указать каждый селектор, как показано ниже:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

Попробуйте сами

Пример 2

После внедрения селекторы продолжают действовать, а соответствующие стили правила группируются в родительских правилах:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

Попробуйте сами

Совет:Если стиль .box из примера нужно удалить из вашего проекта, вы можете удалить весь блок, не обязательно искать соответствующие селекторы.

Грамматика CSS

parentrule {
  css declarations;
  & childrule {
    css declarations;  } 
}

Технические детали

Поддержка браузеров