浏览器如何从两个不同的 css 选择器规则中选择要呈现的 css 属性值？

Question

我正在做一个 Bootstrap 项目，第一个任务是使用 Bootstrap navbar 在标题中构建导航。我想使用 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 检查中发现的。当我取消选中 nav>li 规则时，我的规则有效。我想知道当浏览器在同一元素和同一属性上获得两个规则时，如何选择要呈现的 css 属性值中的哪一个？ 谢谢。

Answer 1

简而言之，就是特异性。选择器越具体，优先级越高。

更多详情，看这里...https://developer.mozilla.org/en/docs/Web/CSS/Specificity

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

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