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

问题

This starts from a previous question that I asked but I think I know what needs to be done but not the How. I have this block of code that defines a pager in bootstrap and applies the bootstrap style to it:

<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>

then in a css that I load I have this to over-ride the 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;
}

The default .bbotstrapPager has a top and bottom margin of 10px and I want to reduce it to 2px. I tried !important but that does not work. I have read a bit about css specificity and I think that is what is the problem is. So in this context how would I go about setting specificity in my .bootstrapPager class so that it ranks higher than the default class? My css experience is not great but getting there.

回答1:

Set your margins this way:

.pagination {
    margin: 0px;
}

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

The pager gets rendered to a <div> and an included <ul>.
The <ul> tag has a css class pagination with a margin of 20px on top and bottom.
So, first set those margin to 0px overwriting class pagination with your css resource.

Then you can set the margins you like in your css class bootstrapPager.

Alternatively, you can put all your changes into class pagination and omit your class bootstrapPager.

来源：https://stackoverflow.com/questions/31593230/how-to-set-the-specificity-of-a-css-over-ride-class-for-xpages