CSS, почему адрес "nav a", а не "li"?

Question

У меня есть учебник, где следующий CSS используется для отделения элементов списка друг от друга.

Но почему я адрес nav a, а не li? Может кто-нибудь сказать мне правильную причину не определять padding в li? Это имеет аналогичный эффект.

main-header .header-logo {
  float:left;
}

.main-header nav {
  float: right;
}

.main-header ul {
  list-style: none;
}

.main-header li{
  float:left;
}

.main-header nav a {
  padding: 20px;
}

<div class="container">
  <div class="main-header-container">
    <header class="main-header clearfix">
      <a class="header-logo" href="index.html"><h1>ContactFile</h1></a>
      <nav>
        <ul class="header-main-menu clearfix">
          <li><a href="contact.html">contact</a></li>
          <li><a href="contact2.html">contact2</a></li>
          <li><a href="contact3.html">contact3</a></li>
          <li><a href="contact4.html">contact4</a></li>
        </ul>
      </nav>
    </header>
  </div>
</div>

Answer 1

Все будет отлично работать, если вы примените стили к li, но учтите, что вместо a вы добавляете отступ для элемента li. Это создаст эффект такого типа, когда только текст будет кликабельным в качестве ссылки, тогда как все остальное пространство будет не кликабельным, поскольку оно будет li, а не a