Question

我正在尝试将my blog上的样式博客导航样式从“较新/较旧”文本更改为NEXT / PREVIOUS，并使其与我的RSS文本的颜色/字体/样式/悬停相匹配顶部：通过RSS订阅：到目前为止，我无法改变任何事情。

.pagination .next-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }
.pagination .prev-item { color: #0076a9 !important; font-size: 8em; font-weight: 700; }

Answer 1

这是一种相当笨拙的方法，但是如果你只能控制CSS，这应该对你有用：

.pagination
{
    color: rgba(0,0,0,0)
}

.pagination a
{ 
    font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 16px; 
    font-weight: 700;
}

.pagination a:first-child
{
    position: relative;
    left: 616px;
    color: rgba(0,0,0,0);
}

.pagination a:first-child:after
{
    position: absolute;
    left: 0;
    content: "Next";
    color: #0076a9;
}

.pagination a + a,
.pagination a:only-child
{
    position: relative;
    left: auto;
    margin-left: -59px;
    color: rgba(0,0,0,0);
}

.pagination a + a:after,
.pagination a:only-child:after
{
    position: absolute;
    left: 0;
    content: "Previous";
    color: #0076a9;
}

同样，如果您可以控制HTML，这不是推荐的解决方案。这是做什么的：

隐藏旧版/新版
设置链接字体样式。
如果.pagination div中有一个链接是第一个元素（first-child），我们假设它是“更新”的链接。我们将其重新定位到页面的右侧，但使用rgba(0,0,0,0)
我们利用CSS :after伪类在该链接后添加文本，其中显示“下一步”，并将其颜色设置为与链接相同的颜色。我们使用position: absolute和left: 0
如果有第二个链接，或者.pagination中只有一个链接，那么我们假设这是“较旧”链接，并将其移至最左侧。
然后我们将其视为与“较新”链接相同的方式，但我们将“上一页”添加到其中。

是否可以更改我的博客导航的格式？

1 个答案: