CSS ，为什么要解决 "nav a" 而不是 "li"？

Question

我有一个教程，其中下面的 CSS 用于将列表项彼此分开。

但为什么我要称呼 nav a 而不是 li？有人可以告诉我不在 li 中定义 padding 的正当理由吗？它有类似的效果。

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，一切都会完美无缺，但请考虑为 li 元素而不是 a 元素提供填充。它将创建这种类型的效果，其中只有文本作为 link 可单击，而所有其他 space 将不可单击，因为它将是 li 而不是 a

CSS ，为什么要解决 "nav a" 而不是 "li"？

CSS , why adress the "nav a" and not the "li"?

html

css

stylesheet

web