基于父类的css动态类

Question

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

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

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

.tt-menu {
 width: 850px;
}

这会强制输入框上的预输入下拉菜单与输入框本身相同，并且效果很好。

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

由于我的每个输入都有自己的类，我想知道是否有办法根据它所在的输入框更改 tt-menu 类，例如：

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

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

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

编辑

如果接受的答案对发生在此线程上的人不起作用

.inputBoxA > tt-menu

最终对我有用的是

.inputBoxA .tt-menu

Answer 1

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

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

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

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

如果此特定示例不起作用，或者您希望了解有关此概念的更多信息，请查看 here。