Q&A
CSSもマークダウンのcode機能にてご提示ください
最初に設定したaタグのCSSがあり、次に設定したい場合に最初のCSSが適用されて困っています。
下記のhtmlに、
<a href="リンク">A</a> <a href="リンク">B</a> <a href="リンク">C</a> <a href="リンク">D</a> </div> コード
このようなCSSを設定しています
.flex-menu{
display:flex;
justify-content: center;
}
.flex-menu a {
font-size: 18px;
margin: 30px 0;
padding: 0px 20px 10px 20px;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a {
position: relative;
display: inline-block;
text-decoration: none;
}
a::after {
position: absolute;
bottom: 2px;
left: 0;
content: '';
width: 100%;
height: 4px;
background: rgb(214, 82, 21);
opacity: 0;
visibility: hidden;
transition: .3s;
}
a:hover::after {
bottom: -4px;
opacity: 1;
visibility: visible;
}
そして、次に、別の箇所で、a hrefでリンクを設定したいのですが、aタグで上記のように設定している為、同様の装飾がされてしまい困っています。
<p>これは、<a href="リンク"</a>です。<a href="リンク">こちら</a>をお読みください。</p> </div> コード
このような場合に、前に記載されているCSSが適用されないようにする方法はあるのでしょうか？また、複数にa hrefを設定したい場合に、そもそもの私の最初のCSSの設定の仕方が間違っているのでしょうか？
ご教示のほどよろしくお願い致します。
回答2件
0
ベストアンサー
現状でCSSに指定しているa要素に関係するスタイルを、すべて.flex-menuの中のa要素にだけ適用されるようにすればいい。
具体的には、
CSS
1.flex-menu a:hover { 2 text-decoration: none; 3} 4 5.flex-menu a { 6 position: relative; 7 display: inline-block; 8 text-decoration: none; 9} 10 11.flex-menu a::after { 12 (中略) 13} 14 15.flex-menu a:hover::after { 16 (中略) 17}
投稿2020/09/16 23:14
総合スコア11990
0
idセレクタとかclassセレクタでA要素に指定するのはダメなの？
!importantはもう使わない！CSSの優先順位をおさらいしよう
とかにもあるけど
- 後に書いたものが優先される
- idセレクタ ＞ classセレクタ＋タイプセレクタ ＞ classセレクタ ＞ タイプセレクタ
という関係性だから後に書く時に前で変更された内容を再定義すれば上書きされます。
前に書いた内容を強制する事は
!important
CSSで!importantを使った優先順位の変更【初心者向け】
で可能だけどあまりオススメできません。(トラブルの元になるから)
全体的に共通の指定を行いたい場合、タイプセレクタ(リンクのアンダーラインを消すとか)
細かい違いがある場合、idセレクタとかclassセレクタ(文字の大きさや位置決め)
を使用するようにしてみればどうでしょうか？
投稿2020/09/16 21:32
編集2020/09/17 02:44
総合スコア2506
横からすみません。
引用されたブログ記事にも明記してないので、誤解を呼びそうな表現を補足しておきます。
idセレクタ ＞ 親要素＋タイプセレクタ ＞ classセレクタ ＞ タイプセレクタ
↑は正確には↓です。
idセレクタ ＞ classセレクタ＋タイプセレクタ ＞ classセレクタ ＞ タイプセレクタ
「親要素」がclassセレクタではなくてタイプセレクタだった場合、表記された関係は成り立ちません。詳しくは「CSS詳細度」でググってください。
---
なお、低評価をしたのは私ではないことを、念のため申し添えておきます。
了解しました
指摘内容に合わせて修正しておきます。
> 低評価をしたのは私ではないことを、念のため申し添えておきます。
大丈夫ですよ、他の方へも献身的にお答えになっているような方と認識していますので
一時的な内容でその様な事するとは思っていませんから。
ありがとうございます。
ご対応感謝します。
もしかして、私？！が間違って押してしまっていた？ようです。本当にごめんなさい。いま、＋を押したら０ってなりました
あなたの回答
tips
プレビュー
