サポート » 使い方全般 » 親テーマと子テーマcssの効き方

  • 解決済 typelog

    (@typelog)


    こんなことがありました。
    親テーマ style.css
    sidebar a,
    sidebar a:visited {
    color: #2f2f2f;
    }
    #sidebar a:hover,
    #sidebar a:focus {
    color: #6ea50a;
    }
    リンク文字色だけをカストマイズして、
    子テーマ style.css を
    sidebar a,
    sidebar a:visited {
    color: #666666;
    }
    にするとカーソルオンのとき親テーマのcssが働かない状態。
    試しに親テーマの
    #sidebar a:hover,
    #sidebar a:focus {
    color: #6ea50a;
    }
    を子テーマの style.css にコピーしておくと問題ありませんでした。
    解決ですが、ペアで扱わないとダメなことがあった事例でした。
    とんだ考え違いかもしれませんので、そんなことないというご意見などお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • そんなことないというご意見などお願いします。

    スタイルの指定が間違っています

    sidebar a,
    sidebar a:visited {
    color: #2f2f2f;
    }

    sidebar という要素は、通常ありません

    hover の指定が、#sidebar( id=”sidebar” に対応 )となっているので、

    #sidebar a,
    #sidebar a:visited {
    color: #2f2f2f;
    }

    に修正して、テストをやり直してみてください

    トピック投稿者 typelog

    (@typelog)

    nobita さん、毎度ありがとうございます。

    sidebar の前には#が付いています。投稿時の不注意でした。
    再トライしても同じ結果です。同じようなところが他にもあり、同様な現象です。
    ただし、ペアで扱うと問題がないのでそうしてますが、疑問な現象ではあります。
    ちなみに、他のカストマイズ箇所の干渉を疑って、問題のカストマイズだけで確認しています。

    モデレーター gatespace

    (@gatespace)

    css の優先度の問題では。
    親テーマの

    #sidebar a:hover,
    #sidebar a:focus {
    color: #6ea50a;
    }

    をあとから読み込んだ子テーマの

    #sidebar a {
    }

    が打ち消してるのでは?

    厳密にするなら

    #sidebar a:link,
    #sidebar a:visited {
        color: #666666;
    }

    じゃないでしょうか?

    トピック投稿者 typelog

    (@typelog)

    #sidebar a:link と #sidebar a では現象が同じです。
    確かに打消しが疑われるなら、まさかとは思いますが、疑似クラスを見ないと同じ文になるので上書きされますね。
    疑似クラス以外が同じ文はペアで扱えばよさそうなので、一応解決にしたいと思います。

    特に、親テーマで指定したものが子テーマで指定すると、どうなるという問題ではなさそうです。

    リンク擬似クラスの記述は、LVHA 順に記述しなければならない というのは聞いたことがあると思います。

    チョット、記述の仕方が異なりますが、詳細度は一緒です

    #sidebar a:link,
     #sidebar a:visited {
        color: yellow;
    }
     #sidebar a:hover{
        color:red;
    }
    #sidebar a:active{
        position:relative;
        top:1px;
    }

    これで一応動作するわけですが、

    この後に、

    #sidebar a:visited{
        color:blue;
    }

    を書くと、見事にスタイルがぶっ壊れます。

    たまたま、子テーマでこれを書いたので、うまく動かなくなったという事だと思います。

    active を hoverの前に書いても、hoverが効かなくなるとか

    hoverや、activeが動作しなくなるわけですが、

    :link :visited :hover :activeは、 順番によってスタイルが打ち消されるために

    指摘された現象になっているという事になりそうです。

    打ち消しあわない記述順で、セットで書くのが、正しいようです。

    トピック投稿者 typelog

    (@typelog)

    まだ返信できるようなので、お礼です。
    親テーマでLVHAの順番でも子テーマでLVだけを書けば、見事にHAを破壊するわけですね。
    カストマイズなしでも子テーマにHAをコピーすべしと。
    おかげさまで分かりました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「親テーマと子テーマcssの効き方」には新たに返信することはできません。