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

Question

我有一个教程，其中使用以下CSS来将列表项彼此分开。

但为什么我要解决qazxsw poi而不是qazxsw poi？有人能告诉我一个正确的理由不在nav a中定义li吗？它有类似的效果。

padding

li

Answer 1

如果你将样式应用于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;
}

element而不是

<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>

填充，一切都会完美。它将创建这种类型的效果，其中只有文本可以作为链接点击，而所有其他空间将无法点击，因为它将是li而不是a li

Answer 2

我做了一个片段来更好地说明它，请运行它以查看我正在谈论的内容，我在代码中创建了两个菜单：

当应用填充到a时，你会看到标签的所有区域都是可点击的（包括填充区域），你可以看到在我下面代码的第一个菜单中，所有绿色区域都是可点击的。

当应用于nav a时，绿色区域将不可点击，只有红色区域，即<a>标签区域。

由您来定义哪种更适合您。但从视觉上看，这种结构没有区别。

nav li

a