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

Question

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

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

问题是:dropdown-menu 的 position 属性是绝对的，这使得这个 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;
}