Применение одинаковых стилей к родительским и вложенным дочерним элементам

Question

У меня следующее css правило

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

Я также хочу применить те же правила стиля к *::after и *::before, и я могу сделать это с помощью *, *::after, *::before {}. Однако я хочу, чтобы он соответствовал другим вложенным элементам s css, поэтому я пытаюсь выяснить, как вкладывать эти псевдоэлементы, и в то же время применять один и тот же стиль ко всем 3 из этих селекторов.

Answer 1

Вы можете использовать родительский селектор следующим образом:

* {
  &, &::after, &::before {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
}

Он будет скомпилирован как:

*, *::after, *::before {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}