CSS でテキストの装飾が正しく継承されないのはなぜですか?

CSS テキスト装飾オーバーライドの問題

CSS プロパティ階層では、特定のプロパティが親要素から継承されたプロパティよりも優先されます。ただし、text-decoration プロパティには、この規則の例外があります。

問題:

次のコードを考えてみましょう:

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

これで示されているように[デモ](http://jsfiddle.net/5t9sV/)、子要素 span の text-decoration プロパティは、親 あ element.

理由:

CSS 仕様によれば、子孫要素の

text-decoration プロパティは「装飾に影響を与えることはできません」先祖の。」これは基本的に、子要素が存在するかどうかに関係なく、テキスト装飾が要素全体に適用されることを意味します。

解決策:

CSS3 には、

というプロパティがあります。 text-decoration-skip を子要素に適用すると、継承されたテキスト装飾をスキップできます。ただし、これはインライン要素 (例: span) に対してのみ機能し、サポートされるブラウザーは異なる場合があります。

たとえば、

span 要素内のテキストを表示するには下線を付けずに、次のように追加できます。

span {
  text-decoration-skip: ink;
}

ink はtext-decoration-skip の可能な値の 1 つ。これには、文字、スペース、埋め込みオブジェクトが含まれます。

以上がCSS でテキストの装飾が正しく継承されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。