如何为ui引导popover更改.pover内容CSS

我正在使用ui引导弹出框列出应用程序中的一些通知。 我正在使用uib popover模板来设计popover的内容

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

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

以下是popover的html：

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

因为在我的应用程序中，我在多个地方使用了弹出框，我不想让它们都重新定义CSS

谁能告诉我如何以正确的方式改变这一点？非常感谢大家的帮助

编辑1：我尝试按照makshh的评论中的建议，使用CSS选择器修改“.popover内容”类。此类是父“.popover”类中包含的div

我尝试用以下方法来实现这一点：

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

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

这将使“.my notifications”popover的所有子div的边距为零，这些子div应应用于popover。然而，它似乎根本没有被应用。这种方法可能并不理想，因为它会为低于popover的所有div设置边距，我可能不希望这样。有没有一种方法可以专门使用CSS选择器专门针对.popover内容类

---

我已经创建了一个plnkr来精确显示这是如何不起作用的。。。。您可以在这里看到：

我检查了您的代码。你错过了什么。动态创建的内容无法加载现有的

CSS

或

Js

。当

单击
按钮时，应该加载
css
和
js
。沿着这条路走。我希望它能很好地发挥作用

<script type="text/ng-template" id="popoverTemplate.html">
        <div class="popover-line"> item 1</div>
        <div class="popover-line"> item 2</div>
        <div class="popover-line"> item 3</div>
        <style>
        .popover-content{
          display: block;
          width: 200px;
        }
        .popover-content .popover-line{
          background-color: #ff00ff;
          border-bottom: 2px solid #121212;
          padding: 10px 15px;
        }
        </style>
    </script>


项目1
项目2
项目3
.popover内容{
显示：块；
宽度：200px；
}
.popover内容.popover行{
背景色：#ff00ff；
边框底部：2个实心#121212；
填充：10px 15px；
}

如果您以这种方式编写自定义的
CSS
，那么它将工作。请参见下图，我是如何编写代码的


我希望这将有助于你的项目

看起来需要改变的是填充，而不是边距！真是个白痴。。。哦，好吧。。。很抱歉。。。仍然不确定仅针对popover内容div的最准确方法是什么
将此添加到plunker示例中<代码>.popover无边距。popover内容{
填充：0px；
}
并检查这是否是您想要的。
这将删除popover中的额外空格，并且仅当您已经为此元素定义了类
popover no margin
时，才会应用于此popover。
只需检查我的代码css是否反映了popover内容。您可以通过将css添加到popover content.popover行或作为popover class=“my popover class”为popover创建自定义css来处理popover的css：

HTML

工作演示是

您可以根据需要在.popover content.popover行中添加css（如颜色、边距、填充等）
添加

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


这是因为您通过了自定义类

popover-class="popover-no-margin"

使用
my notifications popover
类来设置内部元素的样式有什么问题？这似乎只会设置外部元素的样式。popover类是的，但例如，如果您的popover内容中有
h3
标记，则可以使用
。my notifications popover h3
选择器来设置样式。只需修改popover容器模板即可要这样做的代码是什么？我尝试了：.my notifications popover>.popover content{margin left:0px；}，但没有成功
 .popover-content .popover-line { margin: 10px 0px; } 
.my-popover-class {   color: blue;   padding-left: 0 !important;}

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

popover-class="popover-no-margin"