Question

我在我的网站上使用了一个名为Wp-PageNavi的分页插件。

它工作正常，可以帮助我在同一类别的页面之间导航。

结果如下所示:(例如，在第4页上）：

显示前两页链接，以及下两页。

我正在尝试自定义css以使用“ - ”添加分隔，所以我尝试了{content：“ - ”}和last-child：在{content：“”}之后，所以我没有在最后一页分离......

问题在于，根据我们正在寻找的页面，类从较小的页面更改为更大的页面，更改为当前页面。

我可以找到如何自定义我的CSS ...

这是插件生成的html代码：

<div class='wp-pagenavi'>
<a class="previouspostslink" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/3/">Page Précédente</a>
<a class="page smaller" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/2/"><li>2</li></a>
<a class="page smaller" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/3/"><li>3</li></a>
<span class='current'>...</span>
<a class="page larger" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/5/"><li>5</li></a>
<a class="page larger" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/6/"><li>6</li></a>
<a class="nextpostslink" href="http://kookai-blog.soixanteseize-lab.com/category/hit-de-la-semaine/page/5/">Page Suivante</a>
</div>

和我的css：

.wp-pagenavi{position: relative;
border-bottom: 1px solid;
display: inline-block;
width: 657px;
font-family: 'FuturaPT-Medium';
font-size: 14px;
line-height: 30px;
margin-left: 96px;
text-align: center;}
.previouspostslink{position: absolute;
left:0;top: 0;
cursor: pointer}
.nextpostslink{
position: absolute;
right:0;top: 0;
cursor: pointer}
.wp-pagenavi {}
.wp-pagenavi a, .wp-pagenavi span {list-style: none;}
.wp-pagenavi li{list-style: none;display: inline-block;margin-right: 5px}
.wp-pagenavi li:after{content:"-";}
.wp-pagenavi span.current{margin-right: 5px}
.wp-pagenavi a:hover, .wp-pagenavi span.current {}
.wp-pagenavi .current {}

这是一个jsfiddle：http://jsfiddle.net/WNmPc/2/

希望有人可以帮助我，我确信必须有一个解决方案，但我找不到如何...也许使用jquery？

非常感谢

Answer 1

而不是之后使用，然后利用“+”选择器，如下所示：

.wp-pagenavi li:before{content:"-"; margin-right: 8px;}
.wp-pagenavi span.current + a > li:before,
.wp-pagenavi > *:first-child > li:before,
.wp-pagenavi .previouspostslink + a > li:before{display: none;}

小提琴：http://jsfiddle.net/WNmPc/11/

将内容nth-child添加到分页中

1 个答案: