親エレメントに含まれる子エレメントにだけ別の設定

スタイルシートに関する質問です。

ページ全体の<a>に対して指定したスタイルとは別に、
<p>など、特定のタグの中に記述された<a>だけにスタイルを指定する方法はありますか？

http://www.tees.ne.jp/~pokochan/style/setup.html
こちらのページに載っている方法を試して

p a {color:#777777;}

と記述したのですが、反映されないようです。（全体の設定が適用さて青色になります）

全体的にはリンクの文字を青色に指定していて、
<p>～～～～<a href="hogehoge.html">hogehoge</a>～～～～</p>
この<p></p>で囲んでいるときだけhogehogeはグレーの文字にしたいと思っているのですが、
↑のコードでは間違っているのでしょうか？
これができれば一番簡単だと思うのですが、ほかに何か方法はありますでしょうか？

作業環境は、Win7、32bitのGoogle Chromeに、Apsalyでタグ打ちしています。
htmlファイルに<link>で外部の.cssファイルを読み込んでいます。

正直、HTMLやStyleSheetをいじるのは8年ぶりぐらいなので不手際がありましたらすみません。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/04/20 22:47

＞全体的にはリンクの文字を青色に指定していて、

が、a{color:blue;}だとしたら、
＞p a{color:gray;}
だと、詳細度は前者が[0,0,0,1]、後者が[0,0,0,2]ですから、後者が優先されるはずです。
しかし、
a:link{color:red;}
と指定されていれば、詳細度は[0,0,1,2]ですから上書きは出来ません。
リンクの擬似クラス
a:link
a:visited
動的な擬似クラス
a:hover
a:focus
a:active
はいずれも、属性セレクタ、クラスセレクタと同様詳細度は[0,0,1,0]となります。

このセレクタ、カスケーディング、詳細度はCSS（カスケーディングスタイルシート）の命ともいえる重要な部分です。これを使えないとスタイルシートなんて扱えません。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

この回答へのお礼

さっそくの回答、どうもありがとうございます。
おっしゃるとおり疑似クラスを設定しておりました。

webコーディングは趣味でやっていただけで、まじめに勉強したことがなかったので、
あちこちのtipsページを見て覚えたものでした。
なので詳細度という値があることすら知りませんでした。
これを機に勉強しなおしてみます。

参考URLまでいただきまして、本当にありがとうございました。

お礼日時：2014/04/20 23:09