質問: 各記事の段落のデザインを変更したくて、AddQuicktag と Simple Custom CSS のプラグインを新規にダウンロード、有効にし始めました。 開始タグを に設定し、カスタムCSS側もそのように h2#danraku2{ }して、サンプル等を{ }へ貼り付けました。(下記) h2#danraku2{ margin: 0 0 1.5em; padding: 0.8em; border-left: 7px solid #2ab9af; border-bottom: 1px dashed #777777; font-size: 1.143em; font-weight: bold; } このようなシンプルなデザインは反映するのですが、少し変わったデザインではどうすれば良いのでしょうか。 例えば下記のような場合、h2から始まる所が3ヶ所ありますが、全てを h2#danraku2{ や h2#danraku2:beforeと始めれば良いのでしょうか。いろいろ試しているのですが反映せずに困っています。宜しくお願い致します。 h2{ position: relative; color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 1.7em; border-bottom: 3px solid #B92A2C; } h2:before{ content: ""; position: absolute; background: #d48789; top: 0; left: 0.4em; height: 12px; width: 12px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } h2:after{ content: ""; position: absolute; background:#d26466; top: 1.0em; left: 0; height: 8px; width: 8px; transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); } アドバイス宜しくお願い致します。
回答: CSSでのセレクタの指定方法によって、挙動が変わります。 例えば、 h2{}とするより、h2.harahetta{}とすると、後者が優先されます。 要素名だけだと、もともとあったCSSと喧嘩しちゃって反映されてないのでは? 反映される優先順位ですが `style="" > # > . > 要素名` だいたい、こんな感じです。 タグに直接書く、`style=""`最強ってところですね。 仮にもし、`h2.harahetta{}`として、喧嘩しちゃったら`div h2.harahette{}`などと足して行ってスタイルが適用されるようにパワーアップも可能です。