如何为 XPage 设置 css 覆盖 class 的特异性

Question

这是从我之前问过的一个问题开始的，但我想我知道需要做什么，但不知道怎么做。我有这段代码，它在 bootstrap 中定义了一个传呼机，并对其应用了 bootstrap 样式：

<xp:pager partialRefresh="true" id="pager1" for="repeat1"
    panelPosition="left" styleClass="bootstrapPager">
    <xp:pagerControl type="Previous" id="pagerControl1"
        styleClass="bootstrapPagerPrevious">
    <xp:this.value><![CDATA[«]]></xp:this.value>
    </xp:pagerControl>
    <xp:pagerControl type="Group" id="pagerControl2"
            styleClass="bootstrapPagerMiddle">
    </xp:pagerControl>
    <xp:pagerControl type="Next" id="pagerControl3"
        styleClass="bootstrapPagerNext">
        <xp:this.value><![CDATA[»]]></xp:this.value>
    </xp:pagerControl>
</xp:pager>

然后在我加载的 css 中我有这个来覆盖 bootstrap class bootstrapPager:

.bootstrapPager {
  display: inline-block;
  padding-left: 0;
  border-radius: 4px;
  margin-left: 10px;
  margin-bottom: 2px;
  margin-top: 2px;
  line-height: 1.42857;
}

默认的 .bbotstrapPager 的上下边距为 10px，我想将其减少到 2px。我试过 !important 但这不起作用。我已经阅读了一些关于 css 特异性的内容，我认为这就是问题所在。因此，在这种情况下，我将如何在我的 .bootstrapPager class 中设置特异性，使其排名高于默认值 class？我的 css 经历并不好，但到了那里。

Answer 1

这样设置边距：

.pagination {
    margin: 0px;
}

.bootstrapPager {
    margin-left: 10px;
    margin-bottom: 2px;
    margin-top: 2px;
    line-height: 14px;
}

传呼机被渲染到 <div> 和包含的 <ul>。
<ul> 标签有一个 css class pagination，上下边距为 20px。
因此，首先将这些边距设置为 0px，用您的 css 资源覆盖 class pagination。

然后您可以在 css class bootstrapPager.

中设置您喜欢的页边距

或者，您可以将所有更改放入 class pagination 并省略 class bootstrapPager.

如何为 XPage 设置 css 覆盖 class 的特异性

How to set the specificity of a css over-ride class for XPages

css

overriding

xpages

twitter-bootstrap-3