ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS スタイルでの不等号の使用と CSS での継承方法について

CSS スタイルでの不等号の使用と CSS での継承方法について

不言
リリース: 2018-06-14 10:27:21
オリジナル
2029 人が閲覧しました

継承はプログラムに特定の問題をもたらすので、継承の原理を真剣に勉強する必要があります。興味のある友人はそれを参照してください。

継承により、プログラムはある程度簡単になります。は、作成プロセス中には便利ですが、プログラムに特定の問題を引き起こす場合があるため、継承の原則とその対処方法を注意深く検討することが重要です。 CSS で継承を扱う方法は次のとおりです。

CSS コードの一部に大なり記号 (>) が含まれています。コードは次のとおりです:

BODY#css-zen-garden > p#extrap2 { 
BACKGROUND-IMAGE:url(../images/bg_face.jpg); 
Z-INDEX: 2; 
POSITION: fixed; 
WIDTH: 205px; 
BOTTOM: 0px; 
BACKGROUND-REPEAT: no-repeat; 
BACKGROUND-POSITION: left bottom; 
HEIGHT: 594px; 
LEFT: 0px 
}
ログイン後にコピー

CSS における大なり記号は何を意味しますか?

例: 複数のspanタグを含むpレイヤーがあります。コードは次のとおりです:

<p> 
<span>亲人</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>
ログイン後にコピー

この時点で、CSSを使用してスタイルを定義すると、次のようになります:

p span { 
font:10px; 
color:blue; 
}
ログイン後にコピー

ただし、この時点では、最初の 1 つの span タグには異なるスタイルが表示されますが、最後の 2 つの タグのスタイルは変更されません。最初のスパンをpタグに入れても大丈夫でしょうか?コードは次のとおりです。

<p> 
<p> 
<span>亲人</span> 
</p> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>
ログイン後にコピー

残念ながら、これは不可能です。p span {...} スタイルは、子タグであるか孫タグであるかに関係なく、p レイヤーの下のすべての span タグで機能するためです。そのスタイルは今でも機能しています。このときCSSの「大なり記号」を使います。

次に、このスタイルを変更しましょう。コードは次のとおりです。

p > span { 
font:10px; 
color:blue; 
}
ログイン後にコピー

このようにして、最初のspanタグを他の2つとは異なるスタイルで表示できます。したがって、CSS における「大なり」記号の機能は次のとおりであることがわかります。ネストされたタグでは、スタイルは孫世代のタグではなく、息子世代のタグにのみ適用されます。

しかし、まだそのような状況があり、次のコード:

<p> 
<span>亲人 
<span>丁当</span> 
</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>
ログイン後にコピー

この時点でも、この「大なり記号」はまだ機能しますか?答えはいいえだ。この孫のspanタグは息子のspanタグのスタイルを継承するためです。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS での継承の使用法の分析

CSS スタイルのオーバーライド ルール

以上がCSS スタイルでの不等号の使用と CSS での継承方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート