为什么在没有ID或祖先类的情况下应用我的CSS规则？

Question

我正在制作一个简单的导航菜单，我希望我的最后一个列表项目(搜索框)在导航栏的最右边。

​

.nav-list li {
  float: left;
  margin: 10px 15px;
}

.nav-list .search-box {
  float: right;
}

<nav>
  <ul class="nav-list">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Features</li>
    <li class="search-box">
      Search: <input type="text" name="search" id="search">
    </li>
  </ul>
</nav>

​

这很好用。但是，当我试图用search-box类来锁定最后一个列表项时，比如

.search-box {
     float: right 
}

它不是漂浮在右边。有人能解释一下为什么它不起作用吗？

编辑:如果我通过Id锁定最后一个项目，它也可以正常工作。喜欢

#search-box {
  float: right
 }

Answer 1

如果您查看开发工具中的计算样式树，您会发现.nav-list li正在将.search-box重写为选择器。它简单地归结为选择器特异性。

这是CSS中常见的情况，您的选择器是合适的。尽可能避免使用!important，因为它会使今后的工作更加困难。

Answer 2

为了正确的造型和使用现代技术，我想给你们展示不同的解决方案。

float不是用来设计样式的。它只适用于文本段落中的浮动图像。这是一次误用的黑客攻击，而且不期而至。

现代解决方案是使用柔性箱，如下面的示例所示。简单地给最后一个项目一个margin-left: auto;，amrgin将占用剩余的空间，因此将最后一个元素移到最右边。

​

nav ul {
  display: flex;
}

nav ul li {
  margin: 10px 15px;
} 

nav ul li:last-of-type {
  margin-left: auto;
}

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Features</li>
    <li>
      Search: <input type="text" name="search" id="search">
    </li>
  </ul>
</nav>

​