CSS 选择器，不理解，内部 li 内部导航，引导程序

Question

所以我正在为我的网站制作导航，但我无法弄清楚这一点。我认为给你部分代码是最容易的

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid"
      <div class="collapse navbar-collapse navbar-right" id="navbar-collapsed-1">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu fix-inverse-dropdown fix-dropdown-height"> <!-- Dropdown Items -->
              <li><a href="#">Drop1</a></li>
              <!-- <li role="seperator" class="divider"></li> -->
              <li><a href="#">Drop2</a></li>
              <!-- <li role="seperator" class="divider"></li> -->
              <li><a href="#">Drop3</a></li>
            </ul>
          </li> <!-- ./dropdown -->
        </ul> <!-- ./navbar-collapse -->
      </div> <!-- ./navbar -->
    </div> <!-- ./container-fluid -->
  </nav> <!-- ./nav -->

顺便说一句，我正在使用引导程序。我想在悬停时更改整个 li 的颜色，所以我尝试了这个

.fix-inverse-dropdown > li:hover {
  color: #fff;
  background-color: #000 !important;
}

在很多方面，然后我发现了这个。

.fix-inverse-dropdown > li:hover > a {
  background-color: blue;
  color: white;
}

这是如何工作的？为什么最后是">a"？而且，如果我将鼠标悬停在 a 标签中的文本上，这会被识别为悬停在 li 片段上吗？

所以，然后我不希望分隔符在悬停时亮起，我希望 li 更大，所以我尝试了这个并删除了分隔符

.fix-inverse-dropdown > li {
  vertical-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

但是当我悬停在 li 上时，填充物的颜色并没有改变。也在网上找到这个

.navbar-inverse .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #999;
}

我不知道为什么以及如何工作。有人可以向我解释一下吗？:P

我

真的花了大约 2 个小时，所以非常感谢帮助我

的人

编辑：

我现在有点明白了，所以我仍然不明白的是这个

第一个问题：如果我有 3 个div 彼此放置，如下所示：

<div class="a">
    <div class="b'>
        <div class="c">
        </div>
    </div>
</div>

如何更改div b 和 c 中的文本颜色？为什么会

.b { color: #fff }

不工作？Div c 在div b 里面，对吧？

第二个问题：我有一个列表项，li，类更大。（感谢贝兰·坎库尔！该列表项中是一个 a，没有类。是否可以通过使用类 biggerli 来更改 a 的背景颜色？默认情况下，Bootstrap 在悬停在其上时会更改颜色，但我正在更改它，我必须为 A 单独删除它吗？

我现在已经这样做了

.biggerli:hover,
.biggerli:hover > a {
  background-color: blue !important;
  color: white;
}

这可以缩短吗？

Answer 1

html

上有节点层次结构。>运算符表示直接子级。

<div class='a'>
    <div>
        <div>...</div>
    </div>
</div>

你有一个选择器

.a > div { ... }

那么它会影响第二级div，而不是第三级。

看看CSS">"选择器;它是什么？