如何为XPages设置CSS替代类的特异性 [英] 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>

然后在我加载的CSS中，我可以用它来覆盖bootstrap类bootstrapPager:

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

默认.bbotstrapPager的上下边距为10px，我想将其减小为2px.我尝试过！important，但这不起作用.我已经读过一些关于CSS特异性的文章，我认为这是问题所在.因此，在这种情况下，我将如何在.bootstrapPager类中设置特异性，以使其排名高于默认类? 我的css经验不是很好，但是可以到达那里.

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.

推荐答案

通过以下方式设置边距:

Set your margins this way:

.pagination {
    margin: 0px;
}

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

寻呼机将呈现为<div>和随附的<ul>.
<ul>标记具有css类pagination，顶部和底部的边距为20px.
因此，首先将这些边距设置为使用您的CSS资源覆盖类pagination的0px.

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.

然后，您可以在CSS类bootstrapPager中设置所需的边距.

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

或者，您可以将所有更改放入类pagination中，而忽略类bootstrapPager.

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

这篇关于如何为XPages设置CSS替代类的特异性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！