css - 如何为 ui-bootstrap popover 更改 .popover-content CSS

Question

我正在使用 ui-bootstrap 弹出窗口在我的应用程序中列出一些通知。 我正在使用 uib-popover-template 来设计弹出窗口的内容。

我想更改弹出框内每个元素的填充设置。

我尝试过使用 popover-class 属性，但这只是为整个弹出窗口配置 CSS，而不是为其中包含的元素配置 - 这似乎是 .popover-content CSS 类所控制的。

这是弹出窗口的 html:

<span class="glyphicon glyphicon-globe" uib-popover-template="'myNotifications.html'"
        popover-class="my-notifications-popover"></span>

此外，我不想通过以下方式做到这一点:

.popover-content {
     margin: 0px;
}

因为我在整个应用程序的多个位置使用了弹出框，并且不希望它们都重新定义 CSS。

谁能告诉我如何以正确的方式改变它？非常感谢所有帮助...

编辑 1:我尝试按照 makshh 评论中的建议进行操作，并使用 CSS 选择器修改“.popover-content”类。此类是包含在父“.popover”类中的一个 div。

我尝试用以下方法做到这一点:

.my-notifications-popover {
    margin-left: 0px;
}

.my-notifications-popover div {
    margin-left: 0px;
}

这应该使应应用于弹出窗口的 .my-notifications-popover 的所有子 div 的左边距为零。但是它似乎根本没有应用。这种方法可能并不理想，因为它会将所有 div 的边距设置在我可能不想要的弹出框下方。有没有办法专门使用 CSS 选择器专门针对 .popover-content 类？

我已经创建了一个 plnkr 来准确显示它是如何不起作用的……你可以在这里看到它:https://plnkr.co/edit/Lr43L5b0YUbZEa5Zkvso

Answer 1

已添加

.popover-no-margin .popover-content {
  padding: 0px; 
}

https://plnkr.co/edit/NiIh6qwZiscNZC5ZZrod?p=preview

之所以有效，是因为您通过了自定义类

popover-class="popover-no-margin"