「CSSデザインガイド」学習ノート1_html/css_WEB-ITnose

この記事は、ここ数日で Charles Wyke-Smit の「CSS デザイン ガイド」を読んだ後のいくつかの学習メモと経験に基づいています。コンピューターを専攻していたので、すべてを独学で学びました。当時は CSS について何も知らなかったので、CSS で特定のクラスと ID を選択する方法すら知らなかったので、ソース コードをダウンロードして調べただけだったと記憶しています。 、その後、ファイル内に . と # があるのを見て、推測することなくそれらの使用方法を学びました。その後、ソース コード内で理解できないものを見つけたときは、直接 W3School にアクセスして探しました。これにより、CSS も徐々に習得できるようになり、Web ページを作成する際のほとんどの問題が解決されました。この時期は自分の考え方が揺れていたので、PHP、Java、Androidなども学びたいと思っていましたが、ご想像のとおり、結果的にはそこまで固執することはできませんでした。もうすぐ準４年生ですが、これは無理だと思いました。前から考えていたことですが、自分が一番好きなことは何なのかを考えてみました。最終的な結果は…フロントエンドです。フロントエンドには多くの知識が必要ですが、私の情熱は止まりません。と決めてからまず体系的に知識体系を固めたのがこの『CSSデザインガイド』の勉強ノートでした。 この本も多くの人から推薦され、好評を博しているCSSの入門書です。くだらないことをたくさん言ってきましたが、役に立たないので、すぐに本題に入りましょう。以下は主に一部の章についての著者の要約です。また、著者の個人的な見解といくつかの拡張も含まれています。本の内容。

記事が比較的長いため、複数のパートに分けます

第 1 章 HTML マークアップと文書構造
CSS の対象は HTML であるため、この記事では主にそれについて説明します。 Chapter いくつかの基本的な HTML タグの使用法と構造を学びました。

1.2 HTML ドキュメント分析
このセクションでは、著者は主に、HTML ページに必要な最も基本的なドキュメント構造について次のように説明します。 meta charset ="UTF-8">

まず、 は HTML5 の新しい文書型宣言構文です。HTML4 の長い文書型宣言構文と比較して、HTML5 は大幅に簡略化されています。
1.2.2 ブロックレベル要素とインライン要素

このセクションでは、ブロックレベル要素とインライン要素という 2 つの重要な概念を紹介します。デフォルトでは、ブロックレベル要素は常に 1 行を占めますが、インライン要素はそうではありません。 。 table 要素の特殊な表示属性を除いて、基本的にすべての HTML 要素の表示属性値はブロックまたはインラインのいずれかです。著者の考えの 1 つは、どの HTML 要素を知りたいとしても、最初に尋ねるべきことは「それはブロックレベルの要素なのか、それともインライン要素なのか」ということです。そして、マークアップを記述するときに、この要素がどのように配置されるかを予測する必要があります。これにより、将来的に CSS を使用して位置を変更する方法をさらに検討できるようになります。これは、ブロックレベルの要素とインライン要素の位置に大きな違いがあるためです。これについては、次の展開で詳しく説明します。 。

ブロック レベルの要素ボックス (後で詳しく説明する非常に重要な概念???ボックス モデル) は、親要素と同じ幅に拡張されます。これが、ブロック レベルの要素が 1 つの幅を占める理由です。すべてのブロックのため、ブロックレベル要素の親要素はボディであり、そのデフォルトの幅はブラウザのビューポートサイズであるため、デフォルトではブロックレベル要素の幅もブラウザのビューポートと同じ幅になります。 、ブロックレベル要素 要素の隣には、別のブロックレベル要素を収容できるスペースがありません。

親要素と同じ幅に展開されるブロックレベルの要素と比較すると、インライン要素はそのコンテンツ (ボックス モデルの概念でもある) を「シュリンクラップ」しようとします。なぜ複数なのか これが、各インライン要素が行を埋めるまで 1 行に並べて表示され、各ブロックレベル要素が直接新しい行を開始する理由です。

拡張:

著者は、このセクションではブロックレベル要素とインライン要素の他のいくつかの特性について詳しく説明していません。ここで、それらの特性についての知識を拡張します。まず、いくつかの共通のブロックレベル要素とインライン要素をリストしてみましょう:

div、form、table、header、side、section、article、figcaption、h1 ~h6、nav、p、pre、blockqoute、canvas、ol、ul、dl

span、a、img、label、input、select、textarea、br、i、em、strong、small、button、sub、sup、code
以前、どの HTML 要素について知りたいとしても、最初に尋ねるべき質問は、それがブロックレベル要素なのかインライン要素なのかということです。ボックス モデルでのパフォーマンスは大きく異なりますが、その違いを理解する前に、まず別の概念を知っておく必要があります。置換要素と非置換要素とは、ブラウザが要素の属性に基づいて表示する特定のコンテンツを決定する要素を指します。たとえば、img タグです。ブラウザは、その src に基づいて表示される特定のコンテンツを決定します。この要素の属性値は、この要素に含まれるコンテンツを読み取るために使用されます。一般的な置換要素には、input、textarea、select、object、iframe、video などが含まれます。ブラウザはコンテンツを直接表示するのではなく、その属性の 1 つの値によって特定のコンテンツが表示されるという共通の機能があります。たとえば、ブラウザはラジオ ボタンを表示するかどうかを決定します。 、入力の type 属性の値に基づいてボタンまたはテキスト入力ボックスを複数選択します。 p、label 要素などの非置換要素の場合、ブラウザは要素に含まれるコンテンツを直接表示します。この時点で、置換要素と非置換要素が何であるかについて大まかに理解できるはずです。

2 つの概念を一般的に理解すると、ボックス モデルにおけるブロックとインラインのパフォーマンスの違いを理解できるようになります。 1 つ目は、W3C がサポートする要素オブジェクトを次のように定義します。

適用対象: table-caption、table、inline-table 以外のテーブル表示タイプの要素を除くすべての要素
私の英語はあまり上手ではないので、この文の意味がよくわかりません。私の理解では、表示を除くすべての要素がマージンをサポートしています。属性値は、table-row-group、table-cell、table-row、table-header-group などの、table-caption と table-inline 以外のすべてのテーブル表示タイプですが、私の理解を確認するために、最初に属性値を次のように表示します。テーブルの要素もサポートされています。おそらく、元の標準の理解が間違っています。ただし、特に注意すべき点がもう 1 つあります。 margin-top と margin-bottom は 2 つの特別な属性であり、非置換のインライン要素には影響しません。 以下は、 margin-top と margin- のサポートされるオブジェクトの紹介です。 W3C より下段:

適用対象: table-caption、table、inline-table 以外のテーブル表示タイプを持つ要素を除くすべての要素
これらのプロパティは、置換されていないインライン要素には影響しません。
前の文は、前述の margin の説明は、間違いなく、これらの (margin-top および margin-bottom) 属性が a や span などの非置換インライン要素に影響を与えないということです。単なる非置換要素やインライン要素ではなく、要素です。たとえば、img はインライン要素であり、マージントップとマージンボトムは非置換要素ではなく置換要素であるため、マージントップとマージンボトムはインライン要素に影響を与えません。要素」 この記述は正しくありません。

W3C では、サポートされているパディングのオブジェクトを次のように説明しています:

table-row-group、table-header-group、table-footer-group、table-row、table-column-group、および table-column を除くすべての要素
上記の文は、テーブルの表示タイプが table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column である要素以外はサポートされていないことを意味します。他のすべての要素がサポートされています。

ただし、ここには注意が必要な特殊なケースがいくつかあります。span や img などのインライン要素に左右のパディングを設定した場合の効果は表示されますが、インライン要素に上下のパディングを設定した場合は表示されない場合があります。このような場合、置換要素かどうかと背景色が設定されているかどうかにも分けられます。これらの概念をより直感的に理解するために、ここに表を作成しました:

padding-top、bottom が表示されるかどうか

「padding-top および」ステートメント「padding-bottom はインライン要素には影響を与えない」も間違っています。これらは、背景色が設定されていないインラインの非置換要素と、インラインの置換された要素にのみ表示されるためです。背景色が設定されているかどうかに影響を与え、親要素を展開します。

block と inline-block の違いはたくさんありますが、実際には、これら 2 つの一般的な表示属性に加えて、非常に一般的なもう 1 つの属性があります。それは、inline-block です。はい、これは の組み合わせです。前の 2 つの状況では、block と inline の両方の特性を備えています。たとえば、表示属性値が block または inline である要素の属性値を inline-block に設定した後、text-align: center; のみを使用できます。インライン要素に有効です。中央揃えを宣言するだけでなく、padding-top と padding-bottom を使用して、背景色を設定せずに要素の上部と下部のパディングを設定したり、親要素を引き伸ばしたりすることもできます。

ブロックレベル要素とインライン要素の展開は以上です。不明な点や間違っている点がありましたら、ご指摘ください。

1.3 ドキュメント オブジェクト モデル
このセクションでは、著者は、ブラウザの観点からページ内の要素と各要素の属性を観察する HTML 構造に対応するドキュメント オブジェクト モデル (DOM、ドキュメント オブジェクト モデル) のみを紹介します。ここから、これらの要素の家系図を描くことができます。ドキュメント内の各要素間の関係は、DOM を通じて明確に確認できます。たとえば、次の HTML コードの DOM ファミリー ツリーは次のとおりです。

ドキュメント オブジェクト モデル

ページの HTML マークアップ構造は DOM を定義します。

DOM

上記は非常に単純な DOM 構造図であり、DOM 内の各要素間の関係を直感的に確認できます。 HTML ドキュメント フロー。父子要素か兄弟要素かなど、それらの間の関係。

1.4 概要
この章では、主に HTML タグがコンテンツの構造をどのように提供するか、および各要素が画面上にどのようなボックス (インライン ボックスやブロック レベルのボックスなど) を生成するのかについて説明します。最後に、「内容」について簡単に説明します。 DOM はブラウザ内のドキュメントのモデルであり、CSS は DOM 内の要素のスタイル属性を変更し、それによってページ自体のレイアウトと外観を変更できます。

第 2 章 CSS の仕組み
この章では、主に CSS が HTML にスタイルを追加する仕組みについて説明し、要素の同じ属性に複数のスタイルが設定されている場合にどのスタイルを選択するかなど、カスケードの仕組みについて説明します。 、どのスタイルが最終的に適用されるかは、CSS のカスケード メカニズムによって決まります。

各 HTML 要素には一連のスタイル属性があり、ドキュメント フローでの位置、境界線、背景、色など、ドキュメント フローに表示されるときの要素のさまざまな側面に関連します。 CSS は、最初に HTML 要素を選択し、次に選択した要素の CSS プロパティを設定するメカニズムです。 CSS セレクターと適用されるスタイルによって CSS ルールが形成されます。

2.2 コンテキスト セレクター
コンテキスト セレクターの形式は次のとおりです:

タグ 1 タグ 2 ｛ ステートメント ｝
ここで、タグ 2 は選択するターゲットであり、タグ 1 がタグ 2 の祖先要素である場合のみ (必ずしも親レベル要素である必要はありません) が選択されます。厳密に言えば、コンテキスト セレクターは「Descendant Comninator Selector」と呼ばれる必要があります。

もう 1 つ注意すべき点は、コンテキスト セレクターは区切り文字としてスペースを使用するのに対し、グループ セレクターは区切り文字としてカンマを使用することです。混同しないでください。

2.3 特別なコンテキスト セレクター
前のセクションで作成者によって紹介されたコンテキスト セレクターは、ターゲット要素が DOM 構造の「上流」にそのような祖先要素を持っている限り、この祖先がそうであるかどうかに関係なく、コンテキストとして祖先要素を使用します。要素はターゲット要素と何レベル離れているかは関係ありませんが、「祖先要素」よりも具体的なコンテキストが必要な場合があります。このとき、self-selector> などの特別なセレクターを使用できます。ドア兄弟セレクター+、汎用兄弟セレクター~、および汎用セレクター*。

2.3.1 子セレクター>

ラベル 1 > ラベル 2
ここでのラベル 2 はラベル 1 の子要素である必要があります。つまり、ラベル 1 は親要素ではなく、ラベル 2 の親要素である必要があります。ラベル 2 のその他の祖先要素。

2.3.2 兄弟セレクターの直後 +

ラベル 1 + ラベル 2
ここで、ラベル 2 は兄弟ラベル 1 の直後になければなりません。そうでない場合は無効になります。

2.3.3 一般的な兄弟セレクター ~

ラベル 1 ~ ラベル 2
ここで、ラベル 2 は兄弟ラベル 1 の後に続く必要があります (すぐに続く必要はなく、ラベル 1 のすぐ後ろにあります)。

2.3.4 ユニバーサル セレクター*

*
ユニバーサル セレクター* はドキュメント フロー内の任意の要素を表すワイルドカード文字ですが、ユニバーサル セレクター* は通常、次のような他のセレクターと一緒に使用されます。左から右ですが、ブラウザは右から左にレンダリングします。上のコードの場合、ブラウザは最初にすべての要素を走査し、次にどの要素が親要素としてセクションを持っているかを見つけます。別の例を挙げると、次のようなものがあります。セレクター:

div.container #main > .article {}
レンダリングするとき、ブラウザーは最初にすべてのクラスの記事を含む要素を取り出してセットを形成し、次に各セットを選択します。コレクション内の要素を走査します。要素の親要素の ID が main ではない場合は、コレクションから要素を削除してください。 次に、この要素の親要素から上方向に検索を開始します。クラス名にタグ名 div とコンテナーを持つ要素が見つからない場合は、すべての条件が一致するまでコレクションから要素を削除します。ワイルドカードを使用する場合は、使用しないようにしてください。

2.4 ID およびクラス セレクター
著者は、このセクションで ID セレクターとクラス セレクターを紹介します。これは、要素を選択する別の手段を提供します。これらのセレクターは、要素が存在する限り、要素の階層を無視するために使用できます。要素に id と class の属性と値を追加すると、その値からターゲット要素を見つけることができます。

id 属性と class 属性には任意の値を設定できますが、数字や特殊記号で始めることはできません。
2.4.3 id をいつ使用するか、class をいつ使用するか

id の目的は、ページ内の要素を一意に識別することであるため、各ページの各 id 属性値は一意です。クラスの目的は、同じ特性を持つ要素のグループを識別することです。つまり、複数の同一のクラスがページ上に表示される可能性があります。

いつ ID を使用するかという問題に関する作成者の意見は次のとおりです:

非常に明確なコンテキストを取得するために、各トップレベル領域には ID を追加する必要があります。そのため、CSS を記述するときは、対応するタグにネストされたタグのみが必要になります。エリアが選択されます。
クラスをいつ使用するかについてですが、クラスの目的は同じ特性を持つ要素のグループを識別することなので、ページ内に特定の同じ特性を持つ要素のグループがある場合は、ためらうことなくクラスを使用する必要があります。

ただし、クラスの氾濫を避けるために、ここでクラスを無差別に使用しないように注意する必要もあります。例:

• アラン


• アンドリュー


• アンジェラ


• アンガス< /a>< /li>
  
• アン


• Annette

上記の例は、典型的なクラス フラッディングです。

2.4.4 id と class のまとめ

id をどのような場合に使用するか、どのような場合に class を使用するかについては人それぞれ意見があると思いますが、ここでは私の意見を書きます。id が使用できない場合は使用しないようにしてください。 ID を使用する場合、実際には、CSS のカスケード機構では ID の重みがクラスの 10 倍になるため、作成者は基本的に CSS で ID を使用しません。ある要素に設定すると、前のスタイルの重みが高すぎるため、スタイルは効果を発揮しません。そのため、より高い重みのセレクターを記述する必要があります。 JavaScript で要素を見つける必要がある場合にのみ要素に追加できるため、 document.getElementById() メソッドを通じて必要な要素をすばやく取得できます。

2.5 属性セレクター
属性セレクターには、属性名セレクターと属性値セレクターが含まれており、属性と値を通じて要素を取得します:

タグ名 [属性名]
タグ名 [属性名="属性値"]
例:

img[title] {border: 2px sold blue;}
a[target="_blank"] {background-image: url(_blank.png);}
上記の最初のコードの意味 img タグの場合ははいtitle 属性を持っているので、幅 2px の青い実線の境界線を追加します。 2 番目のコードの意味は、a タグに target 属性があり、この属性の値が _blank の場合、この要素に背景画像を追加することです。

拡張:

実際、上記の 2 つの属性セレクターに加えて、作成者がリストしていない他の属性セレクターがいくつかあります。ここでは、これらの他の属性セレクターについて簡単に紹介します。

タグ名 [name ^=]。 "value"] を使用すると、属性 `name` と `value` で始まる属性値を持つタグを照合できます。たとえば、 a[href^= "http://"] は、`href` 属性を持つすべてのタグと照合します。属性値 `http://` で始まるタグ。

タグ名 [name$="value"] を使用すると、属性 `name` と属性値が `value` で終わるタグを一致させることができます。たとえば、 a[href$=".com"] は、次のようなすべてのタグに一致します。 `href` 属性値が `http://` で終わるタグ。

タグ名 [name*="value"] を使用すると、属性 `name` と `value` を含む属性値を持つタグを一致させることができます。たとえば、 a[href*= "renren"] は、` を持つすべてのタグに一致します。 href` 属性とその属性値には `http://` タグが含まれます。

タグ名 [name|="value"] を使用すると、属性 `name` または `name-` で始まるタグを照合できます。たとえば、p[lang|= "en"] は、`lang を持つタグと照合します。 `attribute.p` タグ。その属性値が `en` か `en-us` であるかは関係ありません。

タグ名 [name~="value"] を使用すると、属性 `name` と一致させることができ、その属性値はスペースで区切られた複数の値を持つ値であり、そのうちの 1 つが `value` (存在する場合):
>この要素を選択するには、p[title~="learn"] を使用できます。
これらの属性セレクターと前の 2 つの属性セレクターの違いに気づいたはずです。これらの属性セレクターを使用すると、次のような多くの予期せぬ効果を簡単に作成できます。

a[href$=" .pdf"] {background-image: url(pdf.png);}
たとえば、上記のコードは、リンクが PDF ドキュメントであることを示す画像を a タグに追加し、他の href 属性の値を追加します。このスタイル ステートメントは、次のような a タグには適用されません。 .pdf で終わらないため、ユーザーはこれがどのタイプのリンクであるかを明確に判断できます。

2.6 疑似クラス
疑似クラスはクラスに似ているため呼び出されますが、実際にはマークアップ内のラベルにクラスは付けられません。

UI (ユーザー インターフェイス、ユーザー インターフェイス) 疑似クラス。 class: HTML 要素が特定の状態 (マウス ポインターが接続上にあるなど) にある場合、CSS スタイルが要素に適用されます。
構造化擬似クラス: マークアップ内に純粋に構造的な関係がある場合 (たとえば、要素が要素グループの最初または最後の要素である場合)、CSS スタイルは対応する要素に適用されます。
2.6.1 UI 疑似クラス

リンク疑似クラス
link: リンクはすぐそこにあり、ユーザーがクリックするのを待っています。
訪問済み: ユーザーは以前にこのリンクをクリックしました。
hover: マウス ポインタが接続上に移動します。
active: リンクがクリックされています (マウスが要素上で押されていますが放されていません)。
上記のリンクの疑似クラスが効果的であるためには、特定の順序でなければならないことに注意してください。記憶を容易にするために、著者は次のように推奨しています。「LoVe? HA!」は、実際には、大文字が各疑似クラスの最初の文字です。このようにすることもできます。 注: 「LoVe, HAte」は実際にはほぼ同じです。

1 つのコロン (:) は疑似クラスを表し、2 つのコロン (::) は CSS3 の新しい疑似要素を表します。
:focus 擬似クラスフォームのテキストフィールドは、ユーザーがクリックするとフォーカスを取得します。例:
input:focus {border: 1px Solid blud;}
このコードの意味は、ユーザーがテキストをクリックしたときです。フォーム内のフィールドの場合、入力タグに幅 1 ピクセルの青い実線の境界線を追加します。疑似クラスのコロンはタグ名の後に続く必要があり、それらの間にスペースを入れてはいけないことに注意してください。それ以外の場合はステートメントが続きます。は無効となります。

:target 擬似クラス ユーザーがページ上の他の要素へのリンクをクリックした場合、どの要素がターゲット (ターゲット) であるかを、:target 擬似クラスを使用して選択できます。例:
詳細情報
ページの他の場所にある more-info という ID を持つ要素がターゲット要素です:

これはあなたが探している情報です。

CSS ルールは次のとおりです:

#more-info:target {background: #eee;}
現時点では、ユーザーがリンクをクリックすると、詳細情報の ID を持つ要素にリダイレクトされます。ターゲット要素の背景は明るい灰色に変わります。

2.6.2 構造化擬似クラス

first-child、last-child、nth-child(n)
e:first-child
e:last-child
first-childとlast-childは兄弟のグループを表しますそれぞれ、要素内の最初の要素と最後の要素、および nth-child(n) は兄弟要素のグループ内の任意の要素を表します。ここで、n は整数 (奇数-奇数または偶数-偶数の場合もあります) または算術式 (2n + 1) を使用できます。例:

• My Fast Pony


• Steady Trotter


• Slow Ol ' Nag

ul li:first-child {color: black;}
ul li:nth-child(2) {color: red;}
ul li:last-child { color: blue;}
上記の CSS ルールを上記の HTML に適用すると、順序なしリストの最初の要素のフォントの色は黒になり、2 番目の要素は赤になり、最後の要素は青になります。

2.7 疑似要素
名前が示すように、疑似要素はドキュメント内に存在するかどうかを示す要素です。より一般的に使用される疑似要素をいくつか紹介します。

::first-letter 疑似要素、たとえば:
p::first-letter {font-size: 300%;}
このようにすると、p タグの最初の文字のサイズは 3 倍になります。元のサイズであり、他の要素はそうではありません。

::first-line 擬似要素: テキスト段落の最初の行を選択できます。
::before および ::after 疑似要素
e::before
e::after
は、次のような特別なコンテンツを特定の要素の前後に追加するために使用できます。 25

;

.age::before { content: "Age: ";}
.age::after { content: " years";}
ここで注意する必要があるのは、::before および ::after 擬似要素についてです。 、そのコンテンツ属性が必要であり、検索エンジンは疑似要素の情報を取得しないため (ドキュメント フローに存在しないため)、検索エンジンにとって重要なコンテンツを疑似要素を通じて追加しないでください。

拡張子:

実際、疑似要素の前のコロンは 2 つまたは 1 つですが、疑似クラスを区別するために、著者は依然として 2 つのコロンを使用することをお勧めします。もう 1 つ注意すべきことは、たとえば、::before および ::after 擬似要素を使用して 2 つの擬似要素を擬似要素に追加した場合、生成された 2 つの擬似要素は擬似要素要素内にあることです。つまり、これらは pseudo-element 要素の子要素であり、それぞれ pseudo-element 要素のコンテンツの先頭と最後に配置されます。 コードは次のとおりです。

疑似要素< /p>gt;

.pseudo-element::after,
.pseudo-element::before {
content: "";
}
Pseudo要素

上の図に示すように、生成された 2 つの疑似要素は、疑似要素要素の内側にあり、疑似要素要素のコンテンツ p タグの前後ではなく、その前後に配置されます。以下に示すように、疑似要素要素の外側に配置します。

疑似要素

2.9 カスケード
カスケードとは、カスケード スタイル シートでのカスケード処理であり、ドキュメント階層内でレイヤーごとにスタイルを重ね合わせる処理です。ブラウザは、タグの特定の属性値の複数のソースに直面してどの値を使用するかを決定します。

カスケードは CSS の中心的なメカニズムであり、それを理解することによってのみ、最も簡単に変更可能な CSS を最も経済的な方法で作成することができ、ドキュメントの外観はデザイン要件を満たしながら、ユーザーが必要に応じて変更できる余地を残すことができます。 . ドキュメントの表示効果。

2.9.1 スタイル ソース

このセクションでは、著者はいくつかのスタイル ソースを紹介します:

-ブラウザのデフォルト スタイル シート
-ユーザー スタイル シート
-著者リンク スタイル シート
-著者の埋め込みスタイル
-著者のインライン スタイル
著者は本の中で次のように説明しています:

ブラウザは、上記の順序に従って各ソースのスタイルを順番にチェックし、定義されている場合は、各タグの属性値の設定を更新し、更新プロセスが完了した後、全体のチェックを行います。完了すると、各ラベルは最終的なスタイルで表示されます。
2.9.4 特異度の計算

このセクションでは、著者は主に特異度の計算方法を紹介します。著者の計算方法と比較して、著者は個人的には次のような以前の計算方法を好みます。最初に 4 つのレベルを定義します: A - B - C - D

1。レベル A はインライン スタイルを表します。たとえば、`style=" "`、重みは 1000 です。レベル B は、たとえば `#main` を表します。 、重みは 100、C レベルはクラス、疑似クラス、属性セレクターを表します。 `.class` および `[title]`、重みは 10 です。

4。 -要素セレクター: `p` や `::after` など、重み: 1。

//各値を計算した後、より大きい値の重みが高くなります。
例:

body #main .class a[title]::after {}

まず、どのセレクターで構成されているかを分析してみましょう。上記のルールには ID セレクター (#main) とクラス セレクター (.class) があります。属性セレクター ([title])、疑似要素セレクター (::after)、および 2 つのタグ名セレクター (body と a) であるため、その重みは次のようになります:

100 × 1 + 10 × 2 + 1 × 3 = 123

もう 1 つの注意点は、重み値 001(12) と 0020 を比較すると、同じ重みでは、後で宣言されたスタイルの方がさらに高いことです。

2.10 概要

この章では、著者は、さまざまなセレクターの使用、カスケード メカニズム、重みの計算など、CSS のいくつかのルールを紹介しました。

間違っている点や不明な点があれば、指摘して議論してください。