0

我正在尝试将博客上的样式博客导航样式从“较新/较旧”文本更改为 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; }
4

1 回答 1

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，这不是推荐的解决方案。这是做什么的：

  1. 隐藏旧/新的“/”
  2. 设置链接字体样式。
  3. 如果 .pagination div 中有一个链接是第一个元素 ( first-child)，我们假设它是“较新”链接。我们将其重新定位到页面的最右侧，但使用使链接不可见rgba(0,0,0,0)
  4. 我们利用 CSS:after伪类在该链接之后添加文本，即“Next”，并将其着色为与链接相同的颜色。我们使用position: absolute和left: 0
  5. 如果有第二个链接，或者 .pagination 中只有一个链接，那么我们假设这是“旧”链接，并将其移动到最左侧。
  6. 然后我们将其与“较新”链接相同的方式处理，但我们将“上一个”添加到它。
于 2013-08-21T01:02:59.877 回答