ホームページ > ウェブフロントエンド > フロントエンドQ&A > Web フロントエンドのクラス セレクターとは何ですか

Web フロントエンドのクラス セレクターとは何ですか

WBOY
リリース: 2022-08-24 16:48:11
オリジナル
3219 人が閲覧しました

Web フロントエンドのクラス セレクターは、クラス名を通じてページ上のクラス名タグを持つセレクターを検索します。クラス セレクターは、一連のタグに対して同じプレゼンテーション メソッドを定義するために使用されます。一般的に使用される構文は、「.class" Name {css 属性名: 属性値;}」です。クラス名は数字、文字、アンダースコア、アンダースコアで構成できますが、数字やアンダースコアで始めることはできません。

Web フロントエンドのクラス セレクターとは何ですか

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

Web フロントエンドのクラス セレクターとは

クラス セレクター。クラス セレクターは、一連のタグに同じ表示方法を定義するために使用されます。一般的に使用される構文は .classValue{プロパティ:値}。ここで、classValue はクラス セレクターの名前であり、CSS 作成者自身が名前を付けます。

クラスセレクター

構造:

.类名 { css属性名:属性值; }
ログイン後にコピー

関数:

クラス名を通じて、ページ上でこのクラス名を持つすべてのタグを検索し、スタイルを設定します。

# 注:

  • すべてのタグには class 属性があり、class 属性の属性値をクラス名 (名前のようなもの) と呼びます

  • クラス名は数字、文字で構成できますただし、数字やダッシュで始めることはできません

  • タグには同時に複数のクラス名を含めることができ、クラス名はスペースで区切られます

  • #クラス名は繰り返すことができ、クラス セレクターは同時に複数のタグを選択できます

Web フロントエンドのクラス セレクターとは何ですか

#知識を広げる

Web フロントエンドで一般的に使用されるセレクターとは何ですか

最初はラベル セレクターです。要素セレクターとも呼ばれます。タグ セレクターの基本形式は次のとおりです: tagName{property:value}。ここで、tagName はタグ名、property は CSS 属性です。

2 番目のタイプはクラス セレクターです。クラス セレクターは、一連のタグに同じ表示メソッドを定義するために使用されます。一般的に使用される構文は .classValue{property:value} です。ここで、classValue はクラス セレクターの名前であり、CSS 作成者自身が名前を付けます。

3 番目のタイプは ID セレクターです。ID セレクターは特定の HTML 要素を定義します。Web ページ内の 1 つのタグまたは要素だけが特定の ID の属性値を使用します。 ID セレクターの基本的な構文形式は次のとおりです:

#idValue{property:value}。ここで、 idValue は ID セレクターの名前であり、CSS ライター自身が記述することができます。

4 番目のタイプはグローバル セレクターで、グローバル セレクターはすべての htmlz 要素に対して機能します。構文形式は *{propery:value} です。このうち、「*」はすべての要素に作用することを意味し、propertyはCSS属性、valueは属性値を意味します。

5 番目のタイプは結合セレクターです。これは、複数のセレクターを結合して複合セレクターを形成するもので、結合セレクターとも呼ばれます。

6番目の方法は、セレクターの継承です。継承のルールは、親タグのセレクターが定義されていない場合、子タグがそれを継承するというもので、子タグが親タグのステートメントを繰り返し定義している場合、子タグの選択が実行されます。

7 番目のタイプは疑似クラス セレクターです。疑似クラス セレクターは主にラベルで使用されます。これには 4 つの状態があります: 未訪問リンク (リンク)、訪問済みリンク (訪問済み)、アクティブ化リンク (アクティブ) . 、マウスは接続上に留まります (ホバー)。

【関連する推奨事項:

JavaScript ビデオ チュートリアル

Web フロントエンド ]

以上がWeb フロントエンドのクラス セレクターとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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