- ベストアンサー
divクラス内のリンクのCSS設定について
- divクラス内にあるリンクのCSS設定方法について質問させてください。
- divクラス内の<a>タグのみをCSSで指定したい状況ですが、どのようにすればよいでしょうか？
- divクラスの中にあるリンクのCSS設定に関して、アドバイスをいただけますか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
普通に使うなら .asset-more-link a【:link等】{・・・} こうしているにも関わらず、反映されないなら詳細度の関係で別のスタイルの設定が優先されているのかも。 http://refluxflow.net/2006/08/css_selector_specificity.html#ID160FA309 !importantを付けてみるのも一つの手です。 http://www.xml.vc/kiso/!important.html
その他の回答 (1)
- auty
- ベストアンサー率58% (284/486)
様々な方法がありますが、<a>に直接設定することもできます。 ・ <a>にid属性 #a1をつける。 #a1 { text-decoration: none; background-color: #0000ee; } ・ <a>にclass属性 c1をつける。 .c1 { background-color: #00ffee; } ・ <div>の中のclass属性 c1に限定する。 div .c1 { background-color: #ff0044; } ・ クラス.asset-more-linkの<a>のhoverに限定する。 .asset-more-link a:hover { color: #dddd00; } 可能性は無限にあります。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>a</title> <style type="text/css"> <!-- .asset-more-link { color: #44aa00; background-color: #ffffff; margin: 1em } #a1 { text-decoration: none; background-color: #0000ee; } .c1 { background-color: #00ffee; } div .c1 { background-color: #ff0044; } .asset-more-link a:hover { color: #dddd00; border:double 4px #ff69b4; } --> </style> </head> <body> <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> <div class="asset-more-link"> <a id="a1" href="example.html">バージョンアップ</a>の続きを読む #a1 </div> <div class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む .c1 </div> <p class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む p .c1 </p> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む .c1 <div class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む div .c1 </div> <div class="asset-more-link"> <a class="c1" href="example.html">バージョンアップ</a>の続きを読む .asset-more-link a:link </div> </body> </html>
補足
HTMLでの変更（classやidの変更）をせずにcssだけで、リンクのスタイルを変更したかったのです。というのは、HTMLを変更するには無数のファイルを変更しなくてはならないからです。
お礼
ありがとうございます。 やっぱり、どこかで別のスタイルシートが優先されているのかもしれません。１つのCSSファイルにかなり冗長に（未整理のまま）書いてしまったのがいけなかった…感じです。 !importantを付けて見事に解決しました。