html - 为特定的(不是所有的)popover 容器设置最大宽度和 css 颜色(help icon1)

Question

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

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

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

http://jsfiddle.net/E5Ly5/683/

$('.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 popover 元素在无法定位的 DOM 的不同部分呈现 popper-content。

为什么不直接将包含 color:red 的类直接附加到您想要的 h6 上呢？

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