浏览器 select 如何根据两个不同的 css select 规则呈现 css 属性 值？

Question

我正在做一个 Bootstrap 项目，第一个任务是使用 Bootstrap 导航栏在 header 中构建导航。我想使用 Bootstrap 的折叠功能来创建 dropdown-menu div，当用户悬停或激活导航项时，它将可见。我想让这个 dropdown-menu div 100% 的屏幕宽度。 这是示例代码：

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

问题是：dropdown-menu的位置属性是绝对的，这使得这个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

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

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