Question

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

/* ========================================================================
     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中的类都与填充弹出窗口的内容相关。虽然popover和它的样式表在全球范围内。如何在本地级别编辑弹出窗口而无需触摸全局样式表。

此外，popover来自ng-bootstrap，我相信问题是我无法覆盖引导程序集的默认宽度

Answer 1

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

在现有规则之后添加新规则的新样式表;
如果您可以控制新的popover HTML，则添加一个类（例如版本2，以便您可以以有意义的方式编辑您的变体，因为.popover.version2继承已经设置的内容并更改您需要的内容）
将“！important”添加到您添加的规则中，并且旨在覆盖其他规则，但请注意，如果现有规则已经存在，则不会起作用。

取决于上下文，如果您的新popover与之前的示例有一些不同，可能会有其他解决方案，例如杠杆对HTML标记或HTML标记属性。

我希望这会有所帮助。

编辑：我看到你编辑了你添加内容的问题了。查看全局CSS，如果您的popover在特定容器中，只需将新规则绑定到容器，如下所示： .team-activity-container .popover {... rules};

用本地css替换全局css

1 个答案: