Question

请你看一下这个演示，让我知道如何才能将风格添加到#pop-one而不是所有的弹出窗口？

<div class="container">
  <button type="button" class="btn btn-default" id="pop-one">Pop 1 </button>
  <button type="button" class="btn btn-default" id="pop-two">Pop 2 </button>
</div>

JS：

$("#pop-one").popover({
         placement: function() { return $(window).width() < 975 ? 'bottom' : 'right'; },
        html: 'true',
        title : '<span class="" style=""><strong>Pop One</strong></span>'+
                '<button type="button"  class="btn btn-default close"\
     onclick="$("#pop-captcha").popover("hide");">x</button>',
        content : '<h4>This is Pop One</h4>',
  }).on('shown.bs.popover', function() {
    var popup = $(this);
    $(this).parent().find("div.popover .close").click(function() {
      popup.click();
    });
  }); 


$("#pop-two").popover({
         placement: function() { return $(window).width() < 975 ? 'bottom' : 'right'; },
        html: 'true',
        title : '<span class="" style=""><strong>Pop Two</strong></span>'+
                '<button type="button"  class="btn btn-default close"\
     onclick="$("#pop-captcha").popover("hide");">x</button>',
               content : '<h4>This is Pop Two</h4>',
  }).on('shown.bs.popover', function() {
    var popup = $(this);
    $(this).parent().find("div.popover .close").click(function() {
      popup.click();
    });
  });

我已经尝试过了：

#pop-one .popover .popover-content{background:red;}

但是id没有完成这项工作

Answer 1

由于按钮（#pop-one）和div（.popover）元素共享的关系，您的css语法无法正常工作。他们是兄弟姐妹，而不是亲子。

在这种情况下，您可以使用相邻选择器，遵循语法E1 + E2。当E1和E2共享同一父节点且E2元素紧跟在E1元素之后时，此规则适用。

#pop-one + .popover .popover-content{background:red;}

#pop-two + .popover {background:green;}

检查fiddle。

在Bootstrap中为特定Popover添加样式

1 个答案: