html - 忽略 CSS 填充

Question

我有一个导航栏，并希望将每个选项卡上的默认填充设置为 14 像素宽，但是对于我将用作徽标的第一个选项卡，我希望有一个 18 像素宽的填充。但是，当我尝试实现这一点时，它不起作用，并继续使用 14px 默认值。

#nav {
  text-decoration: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

#nav>li {
  float: left;
  list-style-type: none;
}

#nav>li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#logo {
  background-color: green;
  padding: 18px 16px;
}

<ul id="nav">
  <li><a href="/home" id="logo">Logo</a></li>
  <li><a href="/opt1">Opt1</a></li>
  <li><a href="/opt2">Opt2</a></li>
  <li><a href="/opt3">Opt3</a></li>
</ul>

标签： htmlcss

Answer 1

这是因为 CSS 的特殊性：#nav > li a比#logo. 这就是@Bouh 的回答有效的原因。我会阅读它。

这是一个特异性计算器：https ://specificity.keegan.st/

或者，您可以通过避免过度使用 id 和子选择器来避免特异性问题，例如：

.navlist {
  text-decoration: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
}

.navlist-item {
  float: left;
  list-style-type: none;
}

.navlink {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.logo {
  background-color: green;
  padding: 18px 16px;
}

<ul class="navlist" id="nav">
  <li class="navlist-item"><a class="navlink logo" href="/home" id="logo">Logo</a></li>
  <li class="navlist-item"><a class="navlink" href="/opt1">Opt1</a></li>
  <li class="navlist-item"><a class="navlink" href="/opt2">Opt2</a></li>
  <li class="navlist-item"><a class="navlink" href="/opt3">Opt3</a></li>
</ul>