リンク内の特定の要素に下線を引かずにリンクのスタイルを設定するにはどうすればよいですか?

特定の要素を強調表示せずにリンクをスタイル設定する

CSS を使用してリンクをスタイル設定する場合、リンク内の特定の要素から下線を削除できないという問題に直面する場合があります。 。これは、たとえば、リンクの一部だけを強調表示したい場合にイライラする可能性があります。

問題の説明

提供されたコード スニペット内:

a {
  text-decoration: underline;
}

a #myspan {
  color: black;
  text-decoration: none;
}

目標は、ID #myspan の要素を除くすべてのリンクに下線を付けることです。ただし、text-decoration: none を設定したにもかかわらず。 #myspan では、下線が引かれたままになります。その理由は、CSS の優先順位ルールにより、より具体的なセレクター (#myspan) よりも親セレクター (a) の優先順位が高くなるためです。したがって、 a の下線は text-decoration をオーバーライドします。 #myspan のルール

解決策

この問題を解決するには、#myspan の表示プロパティを inline-block に変更します。

a #myspan {
  color: black;
  display: inline-block;
}

#myspan を作成することで、 inline-block 要素の場合、テキスト装飾に関する a 要素との関係を削除します。その結果、#myspan には下線が適用されません。

以上がリンク内の特定の要素に下線を引かずにリンクのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。