コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5_html5 チュートリアルのヒントでの Scoped 属性の使用例

HTML5_html5 チュートリアルのヒントでの Scoped 属性の使用例

WBOY
リリース： 2016-05-16 15:47:55
オリジナル
1352 人が閲覧しました

特に、複数の要素の属性を制御できるようにする新しい属性があります。これはスコープ付きです。 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) を使用する必要がある場合があります。 ) を使用してこの問題を解決します。

関連ラベル：
html5
ソース：php.cn
前の記事：HTML5 キャンバスに画像を配置し、pictures_html5 として保存する方法のチュートリアルのヒント 次の記事：HTML5 ローカル ストレージ localstorage、ローカル データベース、sessionStorage の簡単な使用例_html5 チュートリアル スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート