- 締切済み
CSSの優先順位
CSSを一部適用しない部分を設定したいのですが方法が分かりません。 もしかすると、私のやりたいことはCSSの順位付けかもしれません。 ▼基本▼ a:link {color:赤;text-decoration:none;} a:visited {color:青;text-decoration:none;} a:hover {color:黄;text-decoration:none;} a:active {color:緑;text-decoration:none;} ▲基本▲ 一方、下記のテキストには上記CSSの効果はいらないです。ここのテキストはリンクを貼っても文字の色(基本色:黒)を変化させず、下線もつけたくありません。 <td style="border:1px solid gray;" onmouseover="this.style.backgroundColor=紫" onmouseout="this.style.backgroundColor=白">ホーム</td> 「基本」を記述をすると、もちろんリンクをつけたすべてのテキストに適用されてしまいます。 しかし「基本」を一部適用したくない場所に不適用とすると下線とかも勝手につきますよね。 2番目に優先させるものとして↓を記述すべきですか? a:link {color:黒;text-decoration:none;} a:visited {color:黒;text-decoration:none;} a:hover {color:黒;text-decoration:none;} a:active {color:黒;text-decoration:none;} そもそも優先順位のつけかたが分からないのですが…。 色々考えましたが、何をすべきか分かりません。よろしくお願いします。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- INTLINSIDE
- ベストアンサー率42% (383/907)
提示された基本のような書き方をすると、全体に適用されるのはご存知かと思います。 的外れかもしれませんが。 使い分けたい場合は、 提示された基本の部分はそのままで a.name:link{text-decoration:none;} のように名前をつけたものをスタイルシートに追加し (nameは適当な名前) 実際に使う所で <a class="name"> のようにするのが一般的だと思います。 ですが、「a」は「td」に影響を及ぼさないですよね。 下線がついてしまうのは他に原因があるような気がします。 優先順位については以下のサイトで説明がされているようなので ご覧ください。 http://www.stylish-style.com/csstec/base/order.html
補足
ご回答ありがとうございます。 何度やっても「基本」がすべてのリンクに適用されてしまいます。 もう少し粘ってみます。