忽略CSS填充

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特异性有关

使用nav > li a#logo而不是#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;
}