CSSの基本的なセレクターとは何ですか?

CSS の基本的なセレクターは、次のような HTML ドキュメント内の要素を照合するために使用されます。内); 子要素セレクター (直接の子要素と一致); 隣接する兄弟セレクター (直接隣接する兄弟要素と一致); ユニバーサル兄弟属性セレクター (指定された属性要素を持つ要素と一致)。

CSS の基本セレクター

CSS の基本セレクターは、HTML ドキュメント内の要素を一致させるために使用されます。これらのセレクターを使用すると、特定の要素のスタイルを指定できます。

タイプセレクター

• element: 指定された要素名を持つすべての要素と一致します。たとえば、p はすべての段落を意味します。 element：匹配带有指定元素名的所有元素，例如 p 表示所有段落。

类选择器

• .class-name：匹配具有指定类名的所有元素，例如 .example 表示所有带有 example 类的元素。

ID 选择器

• #id-name：匹配具有指定 ID 的单个元素，例如 #header 表示带有 header ID 的元素。

后代选择器

• ancestor descendant：匹配位于祖先元素内的后代元素，例如 ul li 表示所有位于 ul 元素内的 li 元素。

子元素选择器

• parent > child：匹配作为父元素直接子元素的子元素，例如 div > p 表示所有直接位于 div 元素内的 p 元素。

相邻兄弟选择器

• element + adjacent：匹配直接出现在指定元素之后的相邻元素，例如 p + h2 表示所有直接位于 p 元素之后的 h2 元素。

通用兄弟选择器

• element ~ sibling：匹配所有出现在指定元素之后的兄弟元素，包括相邻元素和更远的元素，例如 h1 ~ p 表示所有位于 h1 元素之后的 p 元素。

属性选择器

• [attribute]：匹配具有指定属性的元素，例如 [href] 表示所有具有 href 属性的元素。
• [attribute=value]：匹配具有指定属性并具有指定值的元素，例如 [href="example.com"] 表示所有 href

🎜クラスセレクター🎜🎜🎜🎜.class-name: 指定されたクラス名を持つすべての要素と一致します。たとえば、.example は、 を持つすべての要素を意味します。例 クラスの要素。 🎜🎜🎜🎜ID セレクター🎜🎜🎜🎜#id-name: 指定された ID を持つ単一の要素と一致します。たとえば、#header は headerIDの要素。 🎜🎜🎜🎜子孫セレクター🎜🎜🎜🎜<code>ancestor子孫: 先祖要素内にある子孫要素と一致します。たとえば、ul li は、ul <code>li 要素内の要素。 🎜🎜🎜🎜子要素セレクター🎜🎜🎜🎜parent > child: 親要素の直接の子である子要素と一致します。たとえば、div > は、すべて直接 div 要素内にある p 要素。 🎜🎜🎜🎜隣接兄弟セレクター🎜🎜🎜🎜要素 + 隣接: p + h2 など、指定された要素の直後に表示される隣接要素と一致します。p + h2 はすべて直接を意味します。 p 要素に続く code>h2 要素。 🎜🎜🎜🎜ユニバーサル兄弟セレクター🎜🎜🎜🎜element ~ sibling: h1 ~ p などの隣接する要素やさらなる要素を含む、指定された要素の後に表示されるすべての兄弟要素と一致します。 code> は、<code>h1 要素に続くすべての p 要素を表します。 🎜🎜🎜🎜属性セレクター🎜🎜🎜🎜[attribute]: [href] など、指定された属性を持つ要素と一致します。hrefを持つすべての要素を意味します> 要素の属性。 🎜🎜[attribute=value]: 指定された属性と指定された値を持つ要素と一致します。たとえば、[href="example.com"] はすべての を意味します。 href 属性値「example.com」を持つ要素。 🎜🎜

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