Question

抱歉，我知道这个问题看起来很傻。但是我在找到确切ID selectors以覆盖自定义css文件中的这些功能时遇到问题

任何人都可以告诉我在ID文件中找到执行相关功能（例如：更改背景颜色，字体颜色，悬停背景）的确切bootstrap css的最佳方法是什么，这样我就可以在我自己定制的css文件中覆盖这些函数。

例如，我从bootstrap.css复制了此代码示例当我将鼠标悬停在下拉列表上时，我认为需要更改hover的颜色。

<!--This is the original code I copied-->

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
                <li><a href="#">About Us</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Softwares <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Software 1</a></li>
                        <li><a href="#">Software 2</a></li>
                        <li><a href="#">Software 3</a></li>
                        <!--<li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>-->
                    </ul>
                </li>
            </ul>

所以我创建了一个下拉列表（软件1，软件2，软件3 ）。我需要更改悬停的颜色（当我将鼠标放在下拉列表中的任何可用选项时）。根据上面代码的流程，有可能实现使用这些步骤吗？

nav navbar-nav - ＆gt;下拉菜单 - ＆gt;下拉切换 - ＆gt;下拉菜单

如果我进入dropdown-menu bootstrap.css，我可以看到这些代码示例：

1）

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

2）

  @media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
    border-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #080808;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #444;
    background-color: transparent;
  }
}

3）

navbar-nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
  margin-bottom: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

4）

  @media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

在我上面发布的这四个代码示例中，我可以更改下拉列表的悬停颜色的确切位置是什么？

请以简单的方式解释您的答案，以便我能理解。我真的很费劲地查看这些代码示例以找到确切的位置。

非常感谢！

Answer 1

你走了：

.navbar-nav .open .dropdown-menu>li>a:hover {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav navbar-nav">
  <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li>
  <li><a href="#">About Us</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Softwares <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Software 1</a></li>
      <li><a href="#">Software 2</a></li>
      <li><a href="#">Software 3</a></li>
      <!--<li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>-->
    </ul>
  </li>
</ul>

如何在Bootstrap CSS文件中找到Exact Class / ID选择器以在Custom made CSS文件中覆盖

1 个答案: