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 -->

我使用bootstrap btw。我想在悬停时改变整个li的颜色，所以我尝试了这个

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

在很多方面，我找到了这个。

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

这是如何工作的？为什么＆＃34; ＆GT;一个＆＃34;在末尾？而且，如果我将鼠标悬停在标签上的文字中，是否会将其识别为悬停在李片上？

所以，那时我并不希望分离器在悬停时点亮，我希望它们更大，所以我尝试了这个并删除了分离器

.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，类bigli。（谢谢Behran Kankul！）在该列表项中是a，没有类。是否可以使用更大的类更改a的背景颜色？默认情况下，Bootstrap在悬停时会改变颜色，但我改变了这一点，我是否必须单独删除它？

我现在已经这样做了

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

这可以缩短吗？

Answer 1

html上有节点层次结构。＆GT;操作员意味着直接的孩子。

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

你有一个选择器

.a > div { ... }

然后它将影响第二级div，而不是第三级。

查看CSS '>' selector; what is it?

CSS选择器，不理解，内部导航内部导航，Bootstrap

1 个答案: