CSSのIDセレクターの識別子は何ですか

青灯夜游
リリース: 2022-09-22 15:57:51
オリジナル
3772 人が閲覧しました

CSS では、ID セレクターの識別子は「#」です。特定の ID 属性値でマークされた HTML 要素に特定のスタイルを指定できます。構文構造は「#ID 値 {属性: 属性」です。価値;}" 。 ID 属性は一意であり、ページ全体で反復できません。ID 属性値は数字で始まってはなりません。数字で始まる ID は Mozilla/Firefox ブラウザでは機能しません。

CSSのIDセレクターの識別子は何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

HTML 要素は id 属性を使用して ID セレクターを設定し、CSS の ID セレクターは「#」で定義されます。

構文構造は次のとおりです。

#ID { 属性 : 属性值; }
ログイン後にコピー

次の 2 つの ID セレクター。最初のものは要素の色を赤として定義でき、2 つ目は要素の色を赤として定義できます。要素の色を緑として定義します。

CSSのIDセレクターの識別子は何ですか

次の HTML コードでは、id 属性が red の p 要素は赤で表示され、id 属性が の p 要素は赤で表示されます。緑の属性は緑で表示されます:

CSSのIDセレクターの識別子は何ですか

注目に値します:

  • ID 属性は、反復不可能な唯一の属性ですページ全体で。

    ID 値は HTML ドキュメント内で 1 回だけ出現できます。つまり、ID は 1 つの要素 (要素のタイプではなく、要素) を一意に識別することしかできません。

    つまり、要素の ID はページ内で一意であるため、ID セレクターを使用して一意の要素を選択します。

  • ID 属性値を数字で始めないでください。数字で始まる ID は Mozilla/Firefox ブラウザでは機能しません

id セレクターと派生セレクター

最新のレイアウトでは、派生セレクターの作成に ID セレクターがよく使用されます。

CSSのIDセレクターの識別子は何ですか

上記のスタイルは、サイドバーの ID を持つ要素内に表示される段落にのみ適用されます。この要素はおそらく div または table セルですが、その他の可能性もあります。テーブルまたは他のブロックレベルの要素にすることができます。などのインライン要素にすることもできますが、インライン要素

1 つのセレクターの複数の使用

サイドバーとしてマークされた要素がドキュメント内で 1 回しか出現できない場合でも、この ID セレクターは派生セレクターとしても使用できます。何度も使用:

CSSのIDセレクターの識別子は何ですか

ここで、ページ上の他の p 要素と明らかに異なるのは、サイドバー内の p 要素が特別に扱われていることです。ページ上の他の p 要素とは異なります。 すべての h2 要素の明らかな違いは、サイドバーの h2 要素も異なる特別な処理を受けることです。

#個々のセレクター

ID セレクターは、派生セレクターの作成に使用されない場合でも、独立して機能できます:

CSSのIDセレクターの識別子は何ですか

このルールによると、サイドバーの ID を持つ要素にはピクセル幅の黒い点線の境界線があり、その周囲に 10 ピクセルの幅のパディング (パディング、コンテンツは空白) があります。古いバージョンの Windows/IE ブラウザは、このセレクターが属する要素を明確に定義しない限り、このルールを無視する可能性があります:

CSSのIDセレクターの識別子は何ですか

(学習ビデオ共有:

Web フロント エンド)

以上がCSSのIDセレクターの識別子は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!