0

ブログのスタイル ブログ ナビゲーション スタイルを "Newer / Older" テキストから 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疑似クラスを使用して、リンクの後に「次へ」というテキストを追加し、リンクと同じ色になるように色を付けます。position: absoluteとを使用して、それを目に見えないリンクの上に配置しますleft: 0
  5. 2 つ目のリンクがある場合、または .pagination にリンクが 1 つしかない場合は、それが「古い」リンクであると見なされ、左端に移動されます。
  6. 次に、「Newer」リンクと同じように扱いますが、「Previous」を追加します。
于 2013-08-21T01:02:59.877 に答える