CSSソースセレクターとは何ですか?

css ソース セレクターには、要素セレクター、クラス セレクター、ID セレクター、属性セレクター、擬似クラス セレクター、擬似要素セレクター、子孫セレクター、子要素セレクター、隣接する兄弟セレクター、ユニバーサル セレクターなどが含まれます。詳細な紹介: 1. 要素セレクター、セレクターとして要素名を使用し、要素名に一致するドキュメント内のすべての要素を選択します; 2. クラス セレクター、クラス名をセレクターとして使用し、同じクラス名を持つすべての要素を選択しますドキュメント、ドットで始まるクラス名、3. ID セレクター、要素の一意の ID をセレクターとして使用するなど。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

CSS (Cascading Style Sheet) は、Web ページのスタイルを記述するために使用される言語で、Web ページ内の要素の外観とレイアウトを制御できます。 CSS では、スタイルを適用する要素を選択するためにセレクターが使用されます。 CSS セレクターは、ネイティブ セレクターとカスタム セレクターの 2 つのタイプに分類できます。この記事では、CSS の raw セレクターに焦点を当てます。

1. 要素セレクター: 要素名をセレクターとして使用して、要素名に一致するドキュメント内のすべての要素を選択します。たとえば、p セレクターはすべての段落要素を選択します。

2. クラス セレクター: ドキュメント内の同じクラス名を持つすべての要素を選択するには、クラス名をセレクターとして使用します。クラス名はピリオド (.) で始まります。たとえば、.red セレクターはクラス名が red のすべての要素を選択します。

3. ID セレクター: 要素の一意の ID をセレクターとして使用して、ドキュメント内の対応する ID を持つ要素を選択します。 ID はシャープ記号 (#) で始まります。たとえば、#header セレクターは ID ヘッダーを持つ要素を選択します。

4. 属性セレクター: 要素の属性をセレクターとして使用し、ドキュメント内の対応する属性を持つ要素を選択します。属性セレクターには、[attribute] セレクター (指定された属性を持つ要素を選択する)、[attribute=value] セレクター (指定された属性と値を持つ要素を選択する) など、さまざまな形式があります。

5. 疑似クラス セレクター: 要素の特定の状態をセレクターとして使用して、ドキュメント内の対応する状態を持つ要素を選択します。疑似クラス セレクターはコロン (:) で始まります。たとえば、:hover セレクターは、マウスが要素上にあるときに状態を選択します。

6. 擬似要素セレクター: 要素の特定の部分をセレクターとして使用して、ドキュメント内の対応する部分を持つ要素を選択します。疑似要素セレクターは二重コロン (::) で始まります。たとえば、::before セレクターは、要素の前に挿入されたコンテンツを選択します。

7. 子孫セレクター: スペースで区切られた 2 つのセレクターを使用して、2 番目のセレクターに一致し、最初のセレクターの子孫要素であるドキュメント内の要素を選択します。たとえば、div p セレクターは、div 要素内のすべての段落要素を選択します。

8. 子セレクター: 不等号 (>) で区切られた 2 つのセレクターを使用して、2 番目のセレクターに一致するドキュメント内の要素を選択します。その要素はセレクターの最初の直接の子要素です。 。たとえば、div > p セレクターは、すべての div 要素の直接の子である段落要素を選択します。

9. 隣接する兄弟セレクター: プラス記号 ( ) で区切られた 2 つのセレクターを使用して、2 番目のセレクターに一致するドキュメント内の要素を選択します。この要素は、セレクターの背後の直後にあります。たとえば、h1 p セレクターは、h1 要素の直後にある段落要素を選択します。

10. ユニバーサル セレクター: ドキュメント内のすべての要素を選択するには、セレクターとしてアスタリスク (*) を使用します。ユニバーサル セレクターを他のセレクターと組み合わせて、特定の要素を選択できます。

上記は主な CSS ソース セレクターの種類です。セレクターを合理的に使用することで、Web ページ内の要素スタイルを正確に選択して制御できるため、豊かで多様なページ効果を実現できます。

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