css 基于父 class 的动态 class

css dynamic class based on parent class

我正在使用 Twitter 的 typeahead.js 在用户向其中输入信息时自动填充我页面上的两个不同的输入框。

库的工作方式是在输入框下方添加一个 <div> 元素和一个名为 tt-menu 的 class。

我的第一个输入框宽度是850px，所以我在我的CSS里面加了一个class如下，覆盖了typeahead.js的默认宽度"auto":

.tt-menu {
 width: 850px;
}

这会强制输入框上的预输入下拉菜单与输入框本身相同，并且工作正常。

我的问题是我的第二个输入框只有 650px - 所以 typeahead 下拉菜单比输入框大 200px。

由于我的每个输入都有自己的 class，我想知道是否有办法根据其下方的输入框更改 tt-menu class ，类似于：

.inputBoxA tt-menu {
  width: 850px;
}

.inputBoxB tt-menu {
  width: 650px;
}

但是这个解决方案不起作用。

编辑

如果已接受的答案不适用于碰巧看到此主题的人 

.inputBoxA > tt-menu

最终对我有用的是 

.inputBoxA .tt-menu

尝试使用不同的 CSS 选择器以更好地定义它是菜单的 子项。

您可以通过在 CSS 选择器中使用 > 来做到这一点，类似于：

.inputBoxA > tt-menu { width:850px; }

这会选择 .inputBoxA 父项下的所有 tt-menus。

如果这个具体示例不起作用，或者您想阅读更多关于这个概念的信息，请查看 here。