将内容 nth-child 添加到分页答案

【问题标题】：add content nth-child to pagination将内容 nth-child 添加到分页
【发布时间】：2014-06-04 03:33:58
【问题描述】：

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

它运行良好，可以帮助我在同一类别的页面之间导航。

结果如下所示：（例如在第 4 页时）：

显示前两个页面的链接，以及后两个页面。

我正在尝试自定义 css 以使用“-”添加分隔，所以我尝试了 after{content:"-"} 和 last-child:after{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 ？

非常感谢

【问题讨论】：

标签： css wordpress pagination css-selectors

【解决方案1】：

而不是 after 使用 before 然后像这样利用“+”选择器：

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

【讨论】：