CSS: セレクターと Priority_html/css_WEB-ITnose

スタイルの優先順位の原則

一般原則
1. CSS では、確実性の高いセレクターがより高い優先順位を持つと規定されています
2. スタイルに矛盾するルールが含まれており、それらのルールが同じ確実性を持っている場合。そして、後から出現するルールが優先されます。

優先度: 高から低(上から下)

• !重要

• inline(1,0,0,0)

• id: (0,1, 0,0)

• クラス: (0,0,1,0)

• 疑似クラス/プロパティ

• 要素: (0,0,0,1)

• ワイルドカード

クラスセレクター

class="web", 複数の要素は同じクラス名を持つことができます

id selector

id="web", unique

疑似クラスセレクター

CSS 疑似クラス (pseudo -class) は追加されたキーワードですセレクターの後に要素のステータスを指定します。

関連リンク

a:link 未訪問のリンク

a:visited 訪問済みリンク
a:hover マウスをリンクに移動します
a:active 選択されたリンク
:target を使用して、現在アクティブなターゲット要素を選択できます。href=" #222" (コンテンツジャンプ)

フォーム要素に関連します

:focus 擬似クラスは、フォーカスを取得したときに要素に特別なスタイルを追加します

:disabled は、無効になっている各要素と一致します (主にフォーム要素で使用されます)。
:enabled は、有効な要素を意味します
:checked は、選択されたすべての入力要素と一致します (ラジオ ボタンとチェック ボックスのみ) (opera でのみサポート)

親子関連

:empty は、なしを意味します 子要素の場合は、要素ノードとテキスト

(スペースを含む) はカウントされません。コメントと実行命令は考慮されません。

:first-child は、

parent 要素の最初の子要素である要素を表します:first-of-type
:last-of-type

:nth-clild(n) セレクターは N 番目の要素と一致します

parent 要素に属する子要素。要素のタイプに関係なく n は数値、キーワード、または式 (2,an + b,odd) です (n はカウンター (0 から始まります)、b はオフセットです) value)
:nth-last-child(n) reciprocal
:nth-of-type(n)

属性セレクター

E[attr]

E[attr=value]
E[attr~=value ] セレクター属性値に指定された
語彙 が含まれる要素を選択するために使用されます。

E[attr^=value] セレクターは、属性値が

指定された値 で始まるすべての要素と一致します。 E[attr*=value]
E[attr$=value]

関係ベースのセレクター

父子関係

A E 要素 A の子孫である任意の要素 E (子孫ノードは、要素 A の子ノードを参照します) A、子ノード 子ノードなど)

A > 任意の要素 A
(直接) の子要素

兄弟関係

B + E 任意の要素 B

(直接) の次の兄弟要素 E )B ~ E B 要素の後の兄弟要素 E

と

.class1.class2 には class1 属性と class2 属性の両方が含まれます

F#id 特定の ID を持つ F 要素

または

E,F すべて E または F要素

疑似要素

E:first-line テキストの最初の文字に特別なスタイルを追加します。

E:first-letter は、テキストの最初の行に特別なスタイルを追加します。
E:before は要素の前にコンテンツを追加します。
E:after は要素の後にコンテンツを追加します。