当用户在其中输入信息时，我使用Twitter的typeahead.js自动填充页面上的两个不同的输入框。
库的工作方式是在输入框下面添加一个名为<div>的{{1}}元素。
我的第一个输入框的宽度为850px，所以我在CSS中添加了一个类，如下所示，它会覆盖typeahead.js的默认宽度＆＃34; auto＆＃34;：
tt-menu这会强制输入框上的预先输入与输入框本身相同，并且工作正常。
我的问题是我的第二个输入框只有650px - 所以预先输入的下拉列表比输入框大200px。
由于我的每个输入都有自己的课程，我想知道是否有办法让我根据它所在的输入框更改.tt-menu {
width: 850px;
}
课程，类似的东西：
tt-menu但是这个解决方案不起作用。
如果接受的答案对发生在此线程的人不起作用
.inputBoxA tt-menu {
width: 850px;
}
.inputBoxB tt-menu {
width: 650px;
}
最终对我有用的是
.inputBoxA > tt-menu
答案 0 :(得分：1)
尝试使用其他CSS选择器来更好地定义它是菜单的子项。
您可以在CSS选择器中使用>来执行此操作，类似于：
.inputBoxA > tt-menu { width:850px; }
这将选择.inputBoxA父级下的所有tt菜单。
如果此具体示例不起作用，或者您希望阅读有关此概念的更多信息，请查看here。