css - 用本地CSS替换全局CSS

我正在尝试编辑弹出框的样式。在这种情况下，我要编辑显示的宽度。但是，我有一个全局的Popover样式表，适用于应用程序中的所有Popover。

/* ========================================================================
     Component: popovers
 ========================================================================== */

.popover {
    border-radius: 0;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    .arrow {
        margin-left: -7px !important;
    }
    .popover-header {
        padding: 1rem 0.75rem 0.5rem;
        display: block;
        background-color: $secondary;
        border-bottom: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .popover-body {
        padding: 0.5rem 1rem;
        color: $body-color;
    }
    .popover-close {
        position: absolute;
        top: -2px;
        right: 0;
        padding: 0 0.5rem;
        color: $gray-lighter;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
        text-shadow: 0 1px 0 #fff;
        &:hover {
            cursor: pointer;
            color: $body-color;
        }
    }

我想知道如何在我的本地CSS文件中覆盖/添加这些继承的样式。

本地样式表：

.team-activity-container {

    .icon {
      background-image:
      background-repeat: no-repeat;
      display: inline-block
    }

    .icon .icon-team {
      background-position: -5px -5px;
      width: 25px;
      height: 25px
    }
}
.popover {
  background-color: aqua !important;
  width: 500px;
}

编辑：本地样式表位于显示弹出框的容器中，并且html中的类都与填充弹出框的内容相关。弹出窗口及其样式表位于全局级别。我如何在本地级别编辑弹出框而不必触摸全局样式表。

另外，弹出窗口来自ng-bootstrap，我相信问题是我无法覆盖bootstrap设置的默认宽度

最佳答案

我不知道您所处的所有上下文，但是有3种主要方法可以覆盖现有CSS规则：


在现有规则之后添加具有新规则的新样式表；
如果您可以控制新的popover HTML，则添加一个类（例如，version2，以便您可以像.popover.version2这样有意义的方式来编辑变体，以继承已经设置的内容并更改所需的内容）；
在您添加的规则中添加“！important”，并打算覆盖其他规则，但是请注意，如果现有规则已经具有该功能，那么它将无法正常工作。


取决于上下文，如果您的新弹出窗口与前面的示例有所不同，则可能存在其他解决方案，例如利用HTML标签或HTML标签属性。

我希望这有帮助。

编辑：我看到你已经编辑了添加问题的问题。
查看全局CSS，如果您的弹出窗口位于特定的容器中，只需将新规则绑定到该容器即可，如下所示：
.team-activity-container .popover {... rules};