Почему стили применяются и к элементам второго уровня?
main>* {
opacity: 1;
cursor: default;
pointer-events: none;
transition: 1s all ease-in-out;
}
<main id="sasd">
<div class="box1">Блок 1</div>
<div class="box2">Блок 2</div>
<a id="box3" href="#" class="box3">
<div style="background: green;">
<br>
<br>
<br>
</div>
Блок 3
<br>
<br>
<br>
</a>
</main>
Почему к зеленому блоку тоже применяются стили? То есть необходимо применить стили ко всем дочерним элементам 1 уровня, не применяя стили к дочерним 2-3 и тд уровней.
Как так сделать, в чем тут дело? То есть стили необходимо применить к родителям(дочерним 1 уровня), к остальным не нужно. Так к примеру повесили на родителя pointer-events, для чего вешать на дочерний? Если я верно понимаю, если вешать свойства абсолютно на все элементы, так больше будет напрягаться процессор пользователя?
Почему pointer-events, весит на зеленом блоке?
Источник: Stack Overflow на русском