引导 .dropdown-menu 类的 css 样式不适用于祖先/后代选择器

Question

我的网页通过 php include 包含了一些代码。此包含的代码包含几个打开下拉菜单的按钮。我正在使用 bootstrap，因此默认情况下，bootstrap 的 css 类 .dropdown-menu 的样式适用于这些下拉菜单。

我想更改特定下拉菜单的宽度(调整为 100 像素)。

<!-- Sizes dropdown -->
<div class="btn-group women" id="women_sizes">
  <button type="button" class="btn btn-pale dropdown-toggle" data-toggle="dropdown"> 
    size 
    <!-- <span class="caret"></span> --> 
  </button>
  <ul class="dropdown-menu" role="menu">
      ...
  </ul>
</div><!-- end #women_sizes -->

我试过下面的css代码，不知道为什么不行。我已经尝试将这段代码放在页面标题和链接的外部 css 文件中的标记中，我将其包含在 Bootstrap 的 css 之后。

#women-sizes .dropdown-menu  {
  min-width:100px;
  width:100px;
}

我哪里错了？

Answer 1

此处您使用下划线 women_sizes 作为 HTML 中的分隔符...

<div class="btn-group women" id="women_sizes">

此处您在 CSS 中使用破折号 #women-sizes。

#women-sizes .dropdown-menu {

选择一种方法并坚持下去。 Bootstrap 使用破折号，所以我会使用破折号。