CSSセレクター(1)_html/css_WEB-ITnose

CSS セレクターには、タグ セレクター、ID セレクター、クラス セレクター、擬似クラスおよび擬似オブジェクト セレクター、サブセレクター、隣接セレクター、属性セレクター、ユニバーサル セレクター、包含セレクター、セレクターや指定セレクターなどのグループ化セレクターが含まれます。は、タグ セレクター、ID セレクター、クラス セレクター、特殊セレクターの 4 つのカテゴリに分類されます。

以下は、よく使われる 5 つの CSS セレクターをまとめたものです。

1. タグセレクター

例: p{ color:#333; }

a{ display:block; }

利点: ページ上の同じタイプのタグのスタイルをすばやく統一できます。

欠点: 差別化されたスタイルをデザインすることができず、場合によってはスタイルが互いに干渉することがあります。

2. ID セレクター

例: #nav{ margin:0px; padding:10px; }

説明: '#' は ID セレクターのプレフィックス

'nav' は ID 名

ID name は一意であり、ドキュメント内の 1 つの要素にのみ対応します。

適用範囲: ナビゲーション バーなど、ページ上の固有、固定、非反復オブジェクト。

3. クラス セレクター

例: .col{ }

説明: '.' はクラス セレクターの接頭辞

'col' はクラス名

適用範囲: クラス スタイルはドキュメントに適用できますの複数の要素。

特徴: ① クラスセレクターを使用する前に、クラススタイルを適用する要素に対応するクラス属性を HTML 文書内で定義する必要があります

② 柔軟性が高く、要素オブジェクトを指定できます。クラススタイルが適用される範囲。

比較: 同じ条件下では、ID セレクターがクラス セレクターよりも優先されます。

4. 疑似クラスと疑似オブジェクトのセレクター

例: a:hover{ font-weight;bold; }

説明: 'a' は指定されたタグ名です

疑似クラスまたは疑似要素logo

: 特別な状態または特別な領域にある要素を選択するために使用されます。 一般的に使用される 6 つの疑似クラス セレクターを次の表に示します。入力フォーカスになったときにオブジェクトを定義しますスタイル :link :visited :hover マウス通過のスタイルを定義します ...4 つのリンク擬似クラス セレクター「:link」、「:visited」、「:hover」、「:active」を併用する場合は、使用順序を間違えるとハイパーリンク スタイルが無効になりますので注意してください。

例: a{ text-decoration:none; }

a:link{ color: black; }

a:hover{ color: blue; active{ color: grey; }

「:link」疑似クラスに関しては、一部のブラウザはそれを解析してハイパーリンクにします。つまり、訪問することも、訪問しないこともできます。したがって、a セレクター スタイルを a:link セレクター スタイルの代わりに使用できる場合があります。

注: IE ブラウザーでハイパーリンクに関連する疑似クラス セレクターとして使用される場合、a 要素に href 属性が定義されている必要があります。定義されていない場合は無効になりますが、他のブラウザーでは使用できます。 a 要素の href 属性を定義する必要はありません。

5. 子セレクター

例: div>a{ color:#fff; }

説明: 'div' は親の名前を選択します

はサブセレクター識別子です '' '

注: ① 子セレクターによって制御される要素は、' & gt; の記号の前に指定されたオブジェクトによって指定されたサブ要素のみにすることができます。

未訪問のハイパーリンク スタイルを定義します
訪問済みのスタイルを定義