Lernen Sie die grundlegende Syntax der Verwendung von CSS-Selektoren kennen

Um die grundlegende CSS-Selektorsyntax zu beherrschen, sind spezifische Codebeispiele erforderlich.

CSS-Selektoren sind ein sehr wichtiger Bestandteil der Frontend-Entwicklung. Sie können zum Auswählen und Ändern verschiedener Elemente von HTML-Dokumenten verwendet werden. Die Beherrschung der grundlegenden CSS-Selektorsyntax ist für das Schreiben effizienter Stylesheets von entscheidender Bedeutung. In diesem Artikel werden einige gängige CSS-Selektoren und entsprechende Codebeispiele vorgestellt.

Elementselektor Der Elementselektor ist der einfachste Selektor, der das entsprechende Element über seinen Tag-Namen auswählen kann. Um beispielsweise alle Absätze (p-Elemente) auszuwählen, können Sie den folgenden Code verwenden:

p { color: blue; } Klassenselektor Mit dem Klassenselektor können Sie einen oder mehrere Klassennamen zu HTML-Elementen hinzufügen und die entsprechenden Elemente nach Klassennamen auswählen . Klassennamen beginnen mit . . Fügen Sie beispielsweise eine Klasse mit dem Namen highlight zum Text hinzu: . 开头。例如，给文本添加一个名为 highlight 的类：

.highlight { background-color: yellow; } ID选择器 ID选择器允许给HTML元素添加一个唯一的ID，并通过ID来选择对应的元素。ID名以 # 开头。例如，给一个元素添加一个ID为 header ：

#header { font-size: 24px; } 后代选择器 后代选择器可以用来选择特定元素的后代元素。它使用空格将两个选择器连在一起。例如，选择所有 #container 下的 p 元素：

#container p { color: red; } 子元素选择器 子元素选择器可以选择特定元素的直接子元素。它使用 > 来将两个选择器连在一起。例如，选择所有 #navigation 下的直接子元素 li ：

#navigation > li { display: inline; } 伪类选择器 伪类选择器允许选择特定状态的元素，例如，悬停状态、访问状态等。伪类选择器以 : 开头。例如，选择悬停状态下的链接：

a:hover { text-decoration: underline; } 相邻兄弟选择器 相邻兄弟选择器可以选择紧接在另一个元素后的元素。它使用 + 来将两个选择器连在一起。例如，选择紧接在 h1 元素后的 p 元素：

h1 + p { font-weight: bold; } 属性选择器 属性选择器可以选择带有指定属性的元素，可以根据属性的值进行更精确的选择。属性选择器使用方括号 [] 来指定属性名和属性值。例如，选择所有带有 target=_blank a[target="_blank"] { color: pink; }

ID-Selektor Mit dem ID-Selektor können Sie einem HTML-Element eine eindeutige ID hinzufügen und das entsprechende Element anhand der ID auswählen. Der ID-Name beginnt mit # . Fügen Sie beispielsweise ein Element mit der ID header hinzu:

rrreee🎜🎜🎜Descendant-Selektor 🎜Descendant-Selektor kann verwendet werden, um Nachkommenelemente eines bestimmten Elements auszuwählen. Es verwendet Leerzeichen, um zwei Selektoren miteinander zu verbinden. Um beispielsweise alle p -Elemente unter #container auszuwählen: 🎜rrreee🎜🎜🎜Selektor für untergeordnete Elemente 🎜Der Selektor für untergeordnete Elemente kann die direkten untergeordneten Elemente eines bestimmten Elements auswählen. Es verwendet > , um zwei Selektoren miteinander zu verbinden. Um beispielsweise alle li -Elemente auszuwählen, die direkte untergeordnete Elemente von #navigation sind: 🎜rrreee🎜🎜🎜Pseudoklassenselektor 🎜Pseudoklassenselektor ermöglicht die Auswahl von Elementen in einem bestimmten Status, zum Beispiel Hover-Status, Zugriffsstatus usw. Pseudoklassenselektoren beginnen mit : . Um beispielsweise einen Link beim Hover auszuwählen: 🎜rrreee🎜🎜🎜Adjacent Sibling Selector🎜Adjacent Sibling Selector wählt ein Element aus, das unmittelbar auf ein anderes Element folgt. Es verwendet + , um zwei Selektoren miteinander zu verbinden. Wählen Sie beispielsweise das Element p direkt nach dem Element h1 aus: 🎜rrreee🎜🎜🎜Attributselektor 🎜Der Attributselektor kann Elemente mit angegebenen Attributen auswählen für eine genauere Auswahl. Der Attributselektor verwendet eckige Klammern [] , um den Attributnamen und den Attributwert anzugeben. Um beispielsweise alle Links mit target=_blank auszuwählen: 🎜rrreee🎜🎜🎜Die oben genannten sind einige häufig verwendete CSS-Selektoren, aber das ist nur die Spitze des Eisbergs. Die Beherrschung einer besseren Selektorsyntax wird uns helfen, HTML-Elemente besser zu bedienen und flexible und wartbare Stylesheets zu schreiben. 🎜

Lernen Sie die grundlegende Syntax der Verwendung von CSS-Selektoren kennen

In Verbindung stehende Artikel