如何在自定义css中覆盖基类css？

Question

以下是chrome dev工具的截图。在这里，我想覆盖.ui-menu类，并希望将其增加到“20em”。

以下是我试图覆盖的内容：

.menu.ui-menu{

    width:20em;
}

我知道我的css是在基本css之后加载的。为什么它没有在自定义css类中提供css？

更新 以下提供的建议均不适合我。我添加了一个div并为div“menu”提供了id。现在，当我使用以下css时，它可以工作：

#menu  {

    width:20em;
    background-color: yellow;
}

以下是来自控制台的屏幕截图：

仍然无法增加具有“ui-menu”类的菜单的宽度。有人可以帮助识别“ui-menu”的选择器吗？

Answer 1

您需要.menu和.ui-menu之间的空格，如下所示：

.menu .ui-menu {
    width:20em;
}

.menu.ui-menu正在寻找包含menu和ui-menu类的元素，而.menu .ui-menu正在寻找类ui-menu的元素menu的孩子。

Answer 2

ui-menu类在div上，所以你可以写：

div.ui-menu {
    width:20em;
}

或

.ui-menu {
   width:20em !important;
}

或

body .ui-menu{
width:20em;
}

或其他方面，所有解决方案的权重都高于“.ui-menu”风格，因为目前已经存在

Answer 3

我找到了这个问题的答案。我试图在angular 4应用程序中设置css，默认情况下封装所有样式。要解决此问题，请在组件类中使用以下代码：

import { ViewEncapsulation } from '@angular/core';

@Component({

   encapsulation: ViewEncapsulation.None

})

完成此操作后，所有css覆盖都将按预期工作。