css - 基于父类的CSS动态类

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

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

我的第一个输入框的宽度为850px，因此我在CSS中添加了一个类，如下所示，该类覆盖了typeahead.js的默认宽度“ auto”：

.tt-menu {
 width: 850px;
}

这将迫使输入框上的预输入下拉列表与输入框本身相同，并且可以正常工作。

我的问题是我的第二个输入框只有650px-因此typeahead下拉列表比输入框大200px。

因为我的每个输入都有自己的类，所以我想知道是否有一种方法可以根据其下方的输入框来更改tt-menu类，例如：

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