ＨＰ製作 paddingやmarginが効かない

質問

お世話になっております、表題の件、
非常に低レベルな質問になるかと思いますが
失礼致します。

現在、ワードプレスのtwentyelevenをカスタマイズし、
ホームページを作成しておりますが
sidebar.phpを編集してＣＳＳを効かせようとしているのですが
paddingやmarginなどが反映されず困っております。

#secondaryという<div>の中にある
<p>にpaddingをかけようとしており、
サイドバーの中のリンクを右に寄せて
リンクの色を黒に統一しようとしており、
リンクの色は黒に変更したのですが、
paddingが効きません。

※コード
#secondary .sidebar_font (padding-left:20px;}
.sidebar_font a:link { color: #000; }
.sidebar_font a:visited { color: #000; }
.sidebar_font a:hover { color: #000; }
.sidebar_font a:active { color: #000; }

#secondaryのスタイルによってpaddingやmarginが効かなくなることがあるのでしょうか？

大変恐縮ですが
ご助力戴ければ幸いでございます。

回答No.1

_if_ · ベストアンサー

通常、親のスタイルは子のスタイルによって上書きされます。

padding の ｛　が （　になってますが、タイプミスですよね？
手元で実験してみましたが、適応されました。（IE,FireFox,Chrome)

レンダリングした際のpタグの位置など、細かい状況をお聞かせいただければと思います。

お礼

大変失礼致しました！　「（」の対応ミスでございました・・・

ありがとうございました！

回答No.2

ORUKA1951

現在ウェブ標準のCSSでは、基点となるセレクタに続いてセレクタを記述していきます。
＞#secondaryという<div>の中にある<p>にpaddingをかけようとしており、
　ということは、*(全称セレクタ)が省略された書き方ですから
*#section *.sidebar_font a{}
が本来の形です。*全称セレクタの詳細度は0ですから計算すると
1,1,1になりますね。

　もし、このセレクタが無効になるとしたら、他の箇所でより詳細度が高い、もしくは詳細度が同じでも後出の宣言で上書きされている可能性があります。

　現在のDOMツリーがわかりませんから、具体的なアドバイスは不可能ですが、より詳細度を高くした書き方で指定すると良いでしょう。
　firefoxの場合、ツールにDOM Inspectorが標準インストールすると入っていますので、それでDOMツリーを確認してください。
　　　　　　　ID　　　　　　class
BODY
　DIV　　　section
　　P　　　　　　　　　　　sidebar_font
のように表示されるはずです。航であれば、それにしたがって
body div#section p.sidebar_font a{} 詳細度 0,1,1,4
とか

　また、firefoxのアドオンにfireBugというすばらしいアドオンがあります。該当する要素をに対するスタイルシートの継承や上書きがわかります。

　なお、paddingは、継承されないプロパティですから親要素で指定しても子孫には継承されません。colorは継承されますが、marginやpaddingは継承されないなど、どのプロパティが継承されされないかは常識の範囲内ですが、知りたいときはそれぞれの指定を確認してください。
Inherited: no ( http://www.w3.org/TR/CSS2/box.html#propdef-padding-top )と書かれていれば継承しません。

お礼

ご回答戴きありがとうございました！

大変申し訳なかったのですが、タイプミスでございました・・・

お恥ずかしい限りです・・・