如何覆盖自定义CSS中的基类CSS？

Question

这是chrome开发工具的屏幕截图。在这里，我想覆盖.ui-menu类，并希望增加它到“20em”。

这里是我试图重写它：

.menu.ui-menu{ 

    width:20em; 
} 

我知道我的CSS基础CSS加载后。为什么不采用自定义CSS类中提供的CSS？

UPDATE 以下提供的建议都不适用于我。我已经添加了一个div并提供了id给div“菜单”。现在，当我使用下面的CSS，它的工作原理：

#menu { 

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

下面是从控制台的截图：

仍然无法增加有类“UI菜单”菜单的宽度。有人可以帮助确定“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菜单类是在一个div，所以你可以写：

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

或

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

或

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

或别的东西，所有解决方案都较高加权比“.ui-menu”风格更好，因为目前已经有

Answer 3

我找到了这个问题的答案。我想在角4应用程序中设置css，并且所有样式都默认封装。要解决这个问题，可以使用下面的代码在组件类：

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

@Component({ 

    encapsulation: ViewEncapsulation.None 

}) 

一旦做到这一点，因为预期所有的CSS压倒一切会工作。