Was sind die grundlegenden CSS-Selektoren?

Die grundlegenden Selektoren von CSS werden zum Abgleichen von Elementen in HTML-Dokumenten verwendet, einschließlich: Typselektor (passender Elementname); ID-Selektor (passender Klassenname); Nachkommenelemente; innerhalb); Selektor für untergeordnete Elemente (entspricht direkten untergeordneten Elementen); Selektor für benachbarte gleichgeschwisterliche Elemente (entspricht allen gleichgeschwisterlichen Elementen);

Grundlegende Selektoren in CSS

Grundlegende Selektoren in CSS werden verwendet, um Elemente in einem HTML-Dokument abzugleichen. Mithilfe dieser Selektoren können Sie Stile für bestimmte Elemente festlegen.

Typselektor

• element: Entspricht allen Elementen mit dem angegebenen Elementnamen, zum Beispiel bedeutet p alle Absätze. 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

🎜Klassenselektor🎜🎜🎜🎜.class-name: stimmt mit allen Elementen mit dem angegebenen Klassennamen überein, zum Beispiel bedeutet .example alle Elemente mit Beispielelemente der -Klasse. 🎜🎜🎜🎜ID-Selektor🎜🎜🎜🎜#id-name: stimmt mit einem einzelnen Element mit der angegebenen ID überein, zum Beispiel bedeutet #header mit header Element der ID. 🎜🎜🎜🎜Nachkommen-Selektor🎜🎜🎜🎜<code>Vorfahren-Nachkomme: stimmt mit Nachkommen-Elementen überein, die sich innerhalb von Vorfahren-Elementen befinden. ul li bedeutet beispielsweise alle Elemente, die sich innerhalb von ul <code>li Element innerhalb des Elements. 🎜🎜🎜🎜Selektor für untergeordnete Elemente🎜🎜🎜🎜parent > child: Entspricht untergeordneten Elementen, die direkte untergeordnete Elemente des übergeordneten Elements sind, z. B. stellt div > alle direkt Ein <code>p-Element, das sich innerhalb eines div-Elements befindet. 🎜🎜🎜🎜Selektor für benachbarte Geschwister🎜🎜🎜🎜element + angrenzend: stimmt mit benachbarten Elementen überein, die direkt nach dem angegebenen Element erscheinen, z. B. p + h2 bedeutet alle direkt Das h2-Element, das auf das p-Element folgt. 🎜🎜🎜🎜Universeller Geschwisterselektor🎜🎜🎜🎜element ~ sibling: Entspricht allen Geschwisterelementen, die nach dem angegebenen Element erscheinen, einschließlich benachbarter Elemente und weiterer Elemente, wie z. B. h1 ~ p code> repräsentiert alle <code>p-Elemente, die auf das h1-Element folgen. 🎜🎜🎜🎜Attributauswahl🎜🎜🎜🎜[attribute]: stimmt mit Elementen mit angegebenen Attributen überein, z. B. bedeutet [href] alle Elemente mit href Attribut des Elements. 🎜🎜[attribute=value]: Entspricht Elementen mit dem angegebenen Attribut und dem angegebenen Wert, zum Beispiel bedeutet [href="example.com"] alle href Element mit dem Attributwert „example.com“. 🎜🎜

Das obige ist der detaillierte Inhalt vonWas sind die grundlegenden CSS-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!