ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5_html5 チュートリアルのヒントでの Scoped 属性の使用例
HTML5_html5 チュートリアルのヒントでの Scoped 属性の使用例
- WBOYオリジナル
- 2016-05-16 15:47:551351ブラウズ
特に、複数の要素の属性を制御できるようにする新しい属性があります。これはスコープ付きです。 style タグに表示される新しいスコープ付き属性は、CSS スタイルをローカル要素にのみ有効にすることができます。具体的には、このスタイル スタイルを格納する要素のサブ要素に有効になるという点が、通常のスタイルとの唯一の違いです。新しいスコープ付き属性が追加されます。 属性:
コードをコピーします
コードは次のとおりです:/* スタイルはここにあります */
スコープ属性を持つスタイルは、現在の要素とその子要素にのみ適用されます。インライン スタイルはスコープ付きスタイルよりも優先度が高いため、効率の範囲を比較するために、インライン スタイルの使用を避けることをお勧めします。
コードをコピーしますコードは次のとおりです:
div { ボーダー: 1px ソリッドグリーン; 最小高さ: 40px; }
.democontain { 背景: #f8f8f8; }
div { 背景: ライトブルー; ボーダー: 1px ソリッド ブルー }
gt;
メディア クエリなどの正当な CSS スタイル タグは、次のようにスコープ付きスタイルで使用できます。
コードをコピーします
コードは次のとおりです:@ メディアのみの画面と (max-width : 1024px) {
div { 背景: #000; }
}
この新しいスコープ属性は、特にテンプレートを作成する人、CMS ユーザー、またはスタイル ファイル全体を操作できない一部の開発者にとって、非常に便利な機能です。ただし、一部の古いブラウザーはこの属性をサポートしていないことに注意してください。この場合、jQuery プラグイン (https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin) を使用する必要がある場合があります。 ) を使用してこの問題を解決します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。