ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：Tinte divのクラス内のリンクの設定
困り度：
  • 困っています
 　CSSの設定でわからない点がありましたので質問させてください。
　div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか？
　これまでは、divにidを指定して、
#id a:link {…
とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。
ソース自体はこんな風になっています。

<div class="asset-more-link">
<a href="example.html">バージョンアップ</a>の続きを読む
</div>

これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。
質問投稿日時：08/04/05 04:52
質問番号：3923313
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：steel_gray 普通に使うなら
.asset-more-link a【:link等】{・・・}

こうしているにも関わらず、反映されないなら詳細度の関係で別のスタイルの設定が優先されているのかも。
​http://refluxflow.net/2006/08/css_selector_specificity.html#ID160FA309​

!importantを付けてみるのも一つの手です。
​http://www.xml.vc/kiso/!important.html​
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/05 14:24
回答番号：No.2
この回答へのお礼　ありがとうございます。
　やっぱり、どこかで別のスタイルシートが優先されているのかもしれません。１つのCSSファイルにかなり冗長に（未整理のまま）書いてしまったのがいけなかった…感じです。
　!importantを付けて見事に解決しました。

回答

 
回答者：auty 様々な方法がありますが、<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>
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/04/05 06:03
回答番号：No.1
この回答への補足　HTMLでの変更（classやidの変更）をせずにcssだけで、リンクのスタイルを変更したかったのです。というのは、HTMLを変更するには無数のファイルを変更しなくてはならないからです。
　
　
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ