Почему стили применяются и к элементам второго уровня?

Рейтинг: 0Ответов: 0Опубликовано: 22.01.2023

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, весит на зеленом блоке?

Ответы

Ответов пока нет.