HTML CSS セレクターの操作と機能を理解する_html/css

HTML CSS セレクターの操作と機能を理解する_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:27:03

オリジナル

1254 人が閲覧しました

子セレクター

CSS スタイルシートでは、特定の段落タグの下のタグをスタイル設定するなど、セレクターを再度選択する必要がある場合があります ( タグは最初の世代の子要素である必要があります)これは、中央に他のタグがネストされていないことを意味します)。この場合、子セレクターを使用する必要があります。

p>span{

font-size :20px;

}

" > "これは子セレクターと呼ばれます。その機能は、ラベルセレクターの下にある第一世代の子要素のテキストスタイルを 20px に設定することです。しかし、これは明らかに違います。非常に柔軟です。子世代のタグ要素のみを選択できます。複数の世代の子タグを選択する必要がある場合、それらを 1 つずつ変更するのは非常に面倒です。 selector 分かりやすいですが、直接の子孫要素ではなく、上位の階層で指定することができます。プログラム開発でより多くの定数を使用するとプログラムがより堅牢になるのと同じように、異なるセレクターを選択するのに適切なタイミングを選択してください。

スタイルがある場合は、同時に使用したいです複数のタグの場合、同じクラスと ID を変更できますが、これは非常に面倒で、ID セレクターは 1 回しか設定できないため、このときにグループセレクターを使用するには、記号「,」（二重引用符なし）を通して、複数のセレクターで同時に同じスタイルを使用できます

p,span{

font-size:20px ;

}

疑似クラスセレクター

これがよく使われるならこれ、ほとんど使われないと言っても過言ではないのが主な理由は、ブラウザの互換性が大きな問題であり、悪である。 IE ((╯‵□′)╯︵┻━┻) なので、最も一般的に使用されているものの 1 つを簡単に紹介します。これは、Web ページを開くときに毎日遭遇するものであり、そうする必要はありません。ブラウザの互換性スタイルを心配してください。

a:hover{

color:red;

}

この文は、上記の学習を通じて簡単に理解できるはずです。つまり、ラベルが色を変更し、ホバーします。マウスが上をスライドすると、a:hover がラベルの特定の状態に属することを意味します。そのため、これは疑似クラスセレクターと呼ばれます

セレクターについては詳しく説明しませんでした。セレクター部分に何もない場合は、* に置き換えます。デフォルトですべてのタグが選択されます。実際の効果はそれほど大きくありません。

CSS のいくつかの機能

継承

この継承は、オブジェクトのカプセル化された継承やポリモーフィック継承ではありません。私の理解では、それはタグとそのサブタグの共通性であるはずですが、オブジェクト指向言語では、サブクラスは親クラスのオープンインターフェイスとメンバー変数を完全に継承しますが、HTMLではスタイルを変更した後です。親タグ、子タグにいくつかのルールが渡されます（すべてのルールが受け入れられるわけではありません）。たとえば、より詳細なルールについては、Baidu で自分で検索することもできます。探索のプロセス、フォントサイズ、色、その他のテキスト属性などの一般的な継承可能な属性、境界線の追加などの非継承可能な属性。優先順位の問題は、簡単に言えば、タグセレクター

重要性

この時点で、属性に最大の重みを設定する必要がある場合があります。このような属性は、最も高い Weight、つまり最も高い優先度になります。コード例:

タグ

スタイルシートのコード

color:red! important;

}

p.class{

color:green;

}

後でコード内の CSS スタイルシートで変更された色は green ですが、p .class は p タグセレクターよりも高い重みを持つクラスセレクターですが、 color 属性が最も高い重みに設定されているため、次の color:green; に ! important を追加すると、色は赤のままになります。重みが加法原理に従っているため、色は緑色になります。実際、効果は最初に重みに依存し、次に重みが同じ場合のカスケードカバレッジ (つまり、最終的な CSS スタイルシート) に依存します。カスケードカバレッジが確認されます。