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

Question

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

我想更改popover中每个元素的填充设置.

我尝试过使用popover-class属性,但这只是为整个popover配置CSS,而不是内部包含的元素 - 这就是.popover-content CSS类似乎可以控制的.

这是popover的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的margin-left为零,应该应用于popover.但它似乎根本没有应用.这种方法可能并不理想,因为它会为我可能不想要的popover下的所有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"