CSS selector_html/css_WEB-ITnose

Selector

Type Selector

要素セレクターおよび単純セレクターとも呼ばれ、要素タグに基づいてスタイルを指定できます。

p {color:red;}

クラスセレクター

通常、同じタイプの特定のスタイルに使用されます。

.xxxClass{}<div class="xxxClass"></div>

IDセレクター

特別な要素の場合は、タイプを指定します

#xxxId{}<div id="xxxId"></div>

子孫セレクター

特定のセレクターの後、指定されたルールの子孫を選択し、それらのスタイルを指定します

div p {}

疑似クラスセレクター

はいくつかの特別なものです要素には特定の条件下でスタイルが割り当てられます。
たとえば、リンクと訪問、および他の要素のホバー、フォーカス、アクティブなど。

a:link, a:visited {}a:hover, a:focus, a:active {}

ユニバーサルセレクター

利用可能なすべての要素にスタイルを追加するなど、ワイルドカードに似ています。

*{}

高度なセレクター

子セレクター

子孫セレクターはすべての子孫を選択しますが、子セレクターは要素の直接の子孫、つまり子要素を選択できます。

#nav>li{}

隣接セレクター

#nav + p {}

属性セレクター

たとえば、ツールヒントにスタイルを追加する

acronym[title]{}

スタイルのカスケード

同じ要素は、要素の子孫、クラス、またはこれにより、スタイルが重複する可能性があります。したがって、! important を使用してスタイルの優先順位を高めることができます。

スタイルの特異性

スタイルが重複する別のケースについて言えば、スタイルが異なる方法で指定されている場合、どちらが最初に使用されるでしょうか?

上から下まで、特異性を理解する必要があります:

style=""#xxx{}.class{}body div{}div{}

つまり、要素のスタイルが優先され、次に ID セレクター、次にクラス セレクター、子孫セレクター、そして最後に型セレクターになります

スタイルの継承

スタイルは継承できます。たとえば、本文にスタイルを追加すると、そのスタイルはページ上の本文内のすべての要素に適用されます。

スタイル参照

スタイルを参照するには 2 つの方法があり、1 つはリンクリンクを使用する方法、もう 1 つはスタイルのインポート方法です:

    <!-- <link rel="stylesheet" type="text/css" href="test.css"> -->    <style type="text/css">    /*slow*/    @import url("test.css");    </style>

それに比べて、リンク方法の方が高速です。

さらに、すべての CSS を同じファイルに配置することをお勧めします。ブラウザによるスタイル ファイルの読み込みはブラウザによって制限されているため、ブラウザによっては同時に 3 つのファイルのダウンロードのみをサポートしている場合や、8 つのファイルをサポートしているブラウザもあります...

ファイルが 3 つある場合、ブラウザは同時に 2 つのみダウンロードできます。ファイルの場合、3 番目のファイルをロードするには、最初の 2 つがダウンロードされるまで待つ必要があります。
そのため、ファイルに入れると読み込みが速くなります。

すべての CSS を 1 つのファイルに入れると、ファイルが大きくなりすぎて保守が困難になる可能性があります。したがって、いくつかの提案があります:

コメント情報を改善する

スタイルをグループ化し、対応するコメントを記述して位置決めを高速化する

公開するときは、コメントの削除、空白の削除、圧縮などのファイルの圧縮を検討できます。現在、多くのブラウザは圧縮パッケージからのファイルのダウンロードをサポートしているため、ファイル サイズを効果的に削減できます。

今回はここまでです！後ほど追加します。