Почему селектор атрибута CSS, за которым следует тег элемента, работает медленнее?

Question

Согласно Vue документам здесь :

Из-за того, как браузеры отображают различные селекторы CSS, p { color: red } будет во много раз медленнее при определении области видимости (т.е. в сочетании с селектором атрибута). Если вместо этого вы используете классы или идентификаторы, такие как .example { color: red }, то вы практически исключите этот удар по производительности

Так что если вы поместите в секцию стиля Vue следующее:

<style scoped>
  .parent .child { 
    background-color: red;
  }

  .parent p {
    background-color: red;
  }

</style>

VueJs преобразует его в следующее:

<style>
  .parent[data-v-12345] .child {
    background-color: red;
  }

  .parent[data-v-12345] p { 
    background-color: red;
  }
</style>

В документе говорится, что второй селектор во много раз медленнее первого.

Может кто-нибудь объяснить, почему второй селектор медленнее?