クラス セレクター タイプには、基本クラス セレクター、マルチクラス セレクター、階層クラス セレクター、サブ要素クラス セレクター、隣接兄弟クラス セレクター、ユニバーサル兄弟クラス セレクター、属性値クラス セレクター、負のクラス セレクターなどが含まれます。詳細な紹介: 1. 基本クラス セレクター (ドットで始まるセレクターを使用する) は、指定されたクラス名の要素を選択することを意味します; 2. マルチクラス セレクター (複数のクラス名を組み合わせたセレクターを使用する) は、指定された複数のクラス名の要素を選択することを意味します。クラス名の要素、複数のクラス名の間にスペースを入れる必要はなく、連続して記述するだけです; 3. 階層型クラスセレクター、スペースで区切られたセレクターなど。
このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。
クラスセレクターはCSSでよく使われるセレクターで、要素のクラス属性を通じて条件を満たす要素を選択します。 CSS には、次の種類のクラス セレクターがあります:
1. 基本クラス セレクター: ピリオド (.) で始まるセレクターを使用して、指定されたクラス名の要素を選択します。たとえば、「.red」はクラス名「red」を持つすべての要素を選択することを意味します。
2. 複数クラス セレクター: 複数のクラス名の組み合わせを使用して、指定された複数のクラス名を持つ要素を選択するセレクター。複数のクラス名の間にスペースを入れる必要はなく、連続して記述します。たとえば、「.red.bold」は、「red」と「bold」の両方のクラス名を持つ要素を選択することを意味します。
3. 子孫クラス セレクター: 要素の子孫要素の中から指定されたクラス名を持つ要素を選択するには、スペースで区切られたセレクターを使用します。たとえば、「div .red」は、「
4. 子クラス セレクター: 要素の直接の子要素の中から指定されたクラス名を持つ要素を選択するには、大なり記号 (>) で区切られたセレクターを使用します。たとえば、`div > .red` は、`
5. 隣接兄弟クラス セレクター: プラス記号 ( ) で区切られたセレクターは、要素の直後にある最初の兄弟要素が指定されたクラスで選択されていることを示します。たとえば、「h1 .red」は、「
6. 一般的な兄弟クラス セレクター: 要素に続くすべての兄弟要素の中から指定されたクラス名を持つ要素を選択するためのチルダ (~) で区切られたセレクター。たとえば、「h1 ~ .red」は、「
7. 属性値クラス セレクター: 角括弧 ([]) と等号 (=) を使用して、指定された属性値を持つ要素を選択します。たとえば、`[class="red"]` は、`class` 属性値が「red」であるすべての要素を選択することを意味します。
8. 否定クラス セレクター: コロン (:not()) を使用して、指定されたクラス名を持たない要素を選択します。たとえば、`:not(.red)` は、クラス名「red」を持たない要素を選択することを意味します。
上記は、CSS の一般的なクラス セレクターの種類です。これらのセレクターを使用すると、クラス名に基づいて Web ページ内の要素を選択してスタイルを設定し、豊かで多様な効果を実現できます。同時に、他のセレクターや属性セレクターと組み合わせて使用して、選択範囲と条件をさらに拡張することができます。
以上がクラスセレクターにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
