Question

我正在开发一个Bootstrap项目，第一个任务是使用Bootstrap导航栏在标题中构建导航。我想使用Bootstrap的折叠功能来创建下拉菜单div，当用户悬停或激活导航项时，它将是可见的。我想让这个下拉菜单div 100％宽度的屏幕。这是示例代码：

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a ...>ABOUT</a>
    <div class="dropdown-menu">
  </li>
</ul>

问题是：下拉菜单的位置属性是绝对的，这使得该div基于最接近的位置祖先定位。在示例代码中是“li”标记，因为在Bootstrap中有一条规则：

.nav>li{
  position: relative;
}

当我添加规则时，可以使此“li”标记位置为静态：

.navbar-nav>li {
  position: inherit;
}

浏览器会忽略此规则，我从Chrome检查中发现了这一点。当我取消选中导航＆gt; li规则时，我的规则有效。我想知道当浏览器在同一元素和相同属性上获得两个规则时，浏览器如何选择要呈现的css属性值？感谢。

Answer 1

总之，特异性。选择器越具体，它的优先级就越高。

话虽如此，你的规则似乎是错误的，因为你需要一个点来表示一个班级......

.navbar-nav>li {
  position: inherit;
}