为特定（不是全部）弹出框容器设置最大宽度和 css 颜色（帮助图标 1）

Question

我想知道如何将 CSS 选择器应用于特定容器。

我尝试将以下 CSS 更改应用到帮助图标 1 而不是帮助图标 2。

我想应用于 helpicon1 弹出窗口的 CSS 更改是：- h6 红色并将 Popover 容器的最大宽度设置为 385px

$('.ico').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

$('.icon2').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

body {
    padding: 50px;
}
.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content{
  max-width:385px;
}
  div.test div.hide h6{
    color: red;
    font-size: 10px;
}

 <div class="test"> 
               <i class="fa fa-question-circle ico" 
               data-toggle="popover"  data-placement="right" 
               data-trigger="hover" >help icon1</i>
               
<div class="popper-content hide"><h6>
Red color Title. </h6>
  <ul>
    <li>Popover container apply max -width: 385px</li>
    <li> test1.</li>
  </ul>
</div></div>      

<div class="test"> 
               <i class="fa fa-question-circle icon2" 
               data-toggle="popover"  data-placement="right" 
               data-trigger="hover" >help icon2</i>
               
<div class="popper-content hide"><h6>
Black color title </h6>
  <ul>
    <li>Popover Container no specific width.</li>
    <li>Test2.</li> </ul>
</div></div>

Answer 1

您尝试执行的操作无法通过您加载内容的方式完成。 bootstrap 弹出元素在无法定位的 DOM 的不同部分呈现 popper-content。

为什么不直接在您想要的 h6 上附加一个包含 color:red 的 class？

这是一个fiddle： http://jsfiddle.net/E5Ly5/684/

为特定（不是全部）弹出框容器设置最大宽度和 css 颜色（帮助图标 1）

Set maximum width and css color for the specific (not all) popover container (help icon1)

html

css

css-selectors

bootstrap-popover