Question

我有一个导航栏，并希望在每个选项卡上将默认填充设置为14px宽，但是对于第一个将用作徽标的选项卡，我希望将其填充为18px宽。但是，当我尝试实现此功能时，它不起作用，并继续使用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>

Answer 1

只需将#logo更改为#nav > li a#logo

Answer 2

这与CSS的特殊性有关

使用#logo代替nav > li a#logo

要覆盖样式时，需要一个更多特定的选择器

Answer 3

这是因为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>

Answer 4

问题在于CSS选择器的特异性。

#nav > li a

比以下更具体：

#logo

因此，这里的第一个示例将始终以您提供的HTML获胜（无论CSS文件中的顺序如何）

这是一组更新的CSS规则：

#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;
}

##nav > li a#logo { /* this selector has been changed to be more specific */
    background-color: green;
    padding: 18px 16px;
}

CSS填充被忽略

4 个答案: