CSS の高度な構文

[はじめに] セレクターのグループ化 セレクターをグループ化して、グループ化されたセレクターが同じステートメントを共有できるようにすることができます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。 h1、h2、h3、h4、h5

セレクターのグループ化

グループ化されたセレクターが同じ宣言を共有するようにセレクターをグループ化できます。グループ化する必要があるセレクターを区切るにはカンマを使用します。以下の例では、すべての見出し要素をグループ化しています。すべてのタイトル要素は緑色です。

h1,h2,h3,h4,h5,h6 {
color: green;
}

継承とその問題点

CSSによれば、子要素は親要素のプロパティを継承します。しかし、常にこのように機能するとは限りません。次のルールを見てください:

body {
font-family: Verdana, sans-serif;
}

上記のルールによると、サイトの body 要素は Verdana フォントを使用します (フォントが存在すると仮定します)。訪問者のシステムの場合）。

CSS 継承では、子要素 (p、td、ul、ol、ul、li、dl、dt、dd など) は、最上位要素 (この場合は body) が所有するプロパティを継承します。追加のルールは必要ありません。本文のすべての子要素は、子要素の子要素と同様に Verdana フォントを表示する必要があります。そして、最近のほとんどのブラウザでは、これが実際に当てはまります。

しかし、ブラウザ戦争の血なまぐさい時代には、標準のサポートが企業にとって優先事項ではなかったので、これは必ずしも起こるとは限りません。たとえば、Netscape 4 は継承をサポートしておらず、継承を無視するだけでなく、body 要素に適用されるルールも無視します。 IE/Windows では、表内のフォント スタイルが無視されるという、IE6 までの関連問題が依然として存在します。私たちは何をすべきか？

Netscape 4 に優しくしてください

幸いなことに、古いブラウザが継承を理解できないという問題は、「Netscape 4 に優しくしてください」と呼ばれる冗長ルールを使用することで対処できます。

Body {on FONT-FAMILY: VERDANA, Sans-Serif;

}

P、TD、UL、OL、LI、DL、DT、DD {

font-family: verdana、sans-service 4.0 ブラウザは理解できません継承ですが、グループ セレクターは理解します。これにより一部のユーザーの帯域幅が無駄になりますが、Netscape 4 ユーザーをサポートする必要がある場合は実行する必要があります。

相続は呪いですか?

「Verdana、sans-serif」フォントをすべての子要素に継承したくない場合はどうすればよいですか?段落のフォントを Times にしたいとします。問題ない。親要素のルールを取り除くために p の特別なルールを作成します: body {

font-family: Verdana, sans-serif;

}

td, ul, ol, ul, li, dl, dt , dd {

font-family: Verdana、sans-serif;
}

p {

font-family: Times、"Times New Roman"、serif;
}

以上がCSS の高度な構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。