<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北から昇るはずです。しかし、すべてを OO の観点から見る必要があり、それではほとんど数字が足りません。実際、数年前に誰かが OO スタイルを提案しましたが、もう見つかりません。 それで、どうやってやるのでしょうか?今では誰もが CSS が次のように書けることを知っています。 .G_G { /* xxxxxx */ } これをプロトタイプ、またはクラスと考えることができます。-__-b はクラスのようです。次に、HTML でオブジェクトを「インスタンス化」する必要があります。例: <div class="G_G">バカだなああああ</div> 要素は対応する CSS 定義を使用しますが、対応するクラスだけでは不十分です。ページがこのクラスを複数の場所に適用する可能性があるためです。" private " 関係を適切に処理するには、前のコードを次のように変更します。 <div id="aoao" class="G_G">バカなaoao</div> この場合、ID aoao の要素は .G_G クラスの定義を適用し、セレクタ#aoao{} を使用してプライベート効果の定義を入力することができます。これは、パブリック.G_G クラスに影響を与えません。同時に、#aoao 定義の優先順位は .G_G よりも高くなります。これは、プライベート定義がパブリック定義よりも優先されるという常識と一致しています^^。ID という固有のものを使用したため、このプライベートに定義されたものの再利用が問題になりました (ID はページに 1 回しか表示できません。誰が言ったのかはわかりませんが、とにかくそれが真実です)。複数の民営化されたものを実装したい場合はどうすればよいでしょうか?次に、「ポリモーフィズム」を実装する必要があります。掘ります、ハハハ。コードを再度変更します。 <div class="G_G o_O">バカだなああああ</div> 1 つは「G_G」、もう 1 つは「o_O」ですが、 .o_O{} を使用すると、CSS が次のようになる場合に要素を定義することもできます。.G_G {幅:100%} .o_O {色:#123456} すべての要素が定義され、定義はカスケードされないため、すべて適用されます。コードがこうなったら、もっと分かりやすくなるかな。 <div class="layout color">バカじゃないよ、フクロウ</div> .layout{幅:100%} .color{色:#123456} 次に、「カプセル化」を実装する必要があります。子セレクターは頻繁に使用されるため、コードを変更します。 <div class="G_G"><span class="bendan">バカ</span> 痛い</div> .bendan{} と.G_G .bendan{} の両方を定義できますが、後者はクラスが "G_G" の要素にのみ適用できます。.bendan .bendan{} をグローバル定義、 .G_G .bendan{} ローカル定義として簡単に理解できます。これは、XHTML と CSS のモジュール化に役立ちます。 ^^伝説の「カプセル化」が現れ、その後に続きます。<div id="aoao" class="G_G o_O"><span class="bendan">バカ</span> Aoao</div> このようなコードは無数の変更を生み出す可能性があります。それでも理解できない場合は、最初から始めてください。 ^^ 実際のところ、これらは真のオブジェクト指向からはまだ程遠いものです。私はまだクリックベイトを学んでいるところですが、ID とクラスの適用を理解するために使用できます。 |
<<: Docker stopはすべてのコンテナを停止/削除します
>>: MySQL 8.0.23 メジャーアップデート (新機能)
1.1 MySQL マルチインスタンスとは何ですか?簡単に言うと、MySQL マルチインスタンスとは...
目次1. ソースコード1.1 モノレポ1.2 タイプスクリプト2. パフォーマンス2.1 ソースコー...
バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp We...
目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...
lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...
#include <linux/moduleparam.h> 1. モジュールパラメータ...
復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...
序文MySQL インデックスで最も重要なデータ構造は B+ ツリーなので、まずは B+ ツリーの原理...
目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...
1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...
今日、入力イベントに関するブログ投稿を見て、気まぐれで関連情報を整理してみました。イベント:関数 c...
ページ A、B、C の 3 つがあります。ページ A にはページ B が含まれ、ページ B にはペー...
目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...
最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...
最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...