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

【问题标题】：css style to bootstrap .dropdown-menu class not working with ancestor/descendant selector引导 .dropdown-menu 类的 CSS 样式不适用于祖先/后代选择器
【发布时间】：2014-12-14 02:47:18
【问题描述】：

我的网页通过 php include 包含一些代码。这个包含的代码包含几个打开下拉菜单的按钮。我正在使用引导程序，因此引导程序的 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 文件中，我在引导程序的 css 之后包含该文件。

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

我做错了什么？

【问题讨论】：

似乎在这里工作？ jsbin.com/xeqovahegu/2/edit?html,output
感谢您提出这个问题。但是它对我不起作用。无论如何，它的大小只有 160 像素。我克隆并尝试了几种不同的宽度。

标签： css drop-down-menu twitter-bootstrap-3 css-selectors

【解决方案1】：

这里您在 HTML 中使用下划线 women_sizes 作为分隔符...

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

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

#women-sizes .dropdown-menu {

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

【讨论】：