Lernen Sie gängige CSS-Selektoren kennen

Um häufig verwendete CSS-Selektoren zu verstehen, sind spezifische Codebeispiele erforderlich.

CSS-Selektoren sind eine Möglichkeit, HTML-Elemente auszuwählen. Sie ermöglichen es uns, Stile auszuwählen, indem wir bestimmte Attribute, Tag-Namen oder andere Bedingungen der Elemente anpassen. Ein tiefes Verständnis häufig verwendeter CSS-Selektoren ist sehr wichtig, um effiziente CSS-Stylesheets zu schreiben und die Webseitenstruktur zu verwalten. Nachfolgend finden Sie einige häufig verwendete CSS-Selektoren und ihre spezifischen Codebeispiele.

1. Elementselektor:

Der Elementselektor ist der einfachste Selektor und wählt Elemente nach Tag-Namen aus.

Codebeispiel:

p {
  color: red;
}

Der obige Code setzt die Textfarbe aller <p></p>-Elemente auf Rot. <p></p> 元素的文本颜色设置为红色。

2. 类选择器（Class Selector）：

类选择器通过元素的class属性来选择元素。

代码示例：

.header {
  font-size: 20px;
}

以上代码将把所有class为 "header" 的元素的字体大小设置为 20 像素。

3. ID选择器（ID Selector）：

ID选择器通过元素的id属性来选择元素。

代码示例：

#container {
  width: 500px;
}

以上代码将把id为 "container" 的元素的宽度设置为 500 像素。

4. 后代选择器（Descendant Selector）：

后代选择器通过元素的层级关系来选择元素。

代码示例：

.container p {
  color: blue;
}

以上代码将把所有在class为 "container" 的元素内部的 <p></p> 元素的文本颜色设置为蓝色。

5. 子元素选择器（Child Selector）：

子元素选择器通过元素的直接子元素关系来选择元素。

代码示例：

.container > p {
  font-weight: bold;
}

以上代码将把所有直接位于class为 "container" 的元素内部的 <p></p> 元素的字体加粗。

6. 相邻兄弟选择器（Adjacent Sibling Selector）：

相邻兄弟选择器通过元素的相邻兄弟关系来选择元素。

代码示例：

h1 + p {
  margin-top: 10px;
}

以上代码将把紧接在 <h1></h1> 元素后面的 <p></p> 元素的上外边距设置为 10 像素。

7. 伪类选择器（Pseudo-class Selector）：

伪类选择器通过元素的特定状态来选择元素，例如鼠标悬停、指定位置等。

代码示例：

a:hover {
  color: purple;
}

以上代码将把鼠标悬停在链接上时的文本颜色设置为紫色。

8. 伪元素选择器（Pseudo-element Selector）：

伪元素选择器用于选择元素的特定部分，例如元素的第一个字母、最后一个子元素等。

代码示例：

p::first-letter {
  font-size: 24px;
}

以上代码将把每个 <p></p>

Klassenselektor: <p></p>🎜Der Klassenselektor wählt Elemente über ihr Klassenattribut aus. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code setzt die Schriftgröße aller Elemente mit der Klasse „header“ auf 20 Pixel. 🎜
🎜ID-Selektor: 🎜🎜🎜Der ID-Selektor wählt Elemente über ihr ID-Attribut aus. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code legt die Breite des Elements mit der ID „Container“ auf 500 Pixel fest. 🎜
🎜Nachkommenselektor: 🎜🎜🎜Der Nachkommenselektor wählt Elemente anhand ihrer hierarchischen Beziehung aus. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code setzt die Textfarbe aller <p></p>-Elemente innerhalb von Elementen mit der Klasse „container“ auf Blau. 🎜
🎜Untergeordneter Selektor: 🎜🎜🎜Der untergeordnete Selektor wählt Elemente über ihre direkte Beziehung zu untergeordneten Elementen aus. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code macht die Schriftart aller <p></p>-Elemente, die sich direkt innerhalb von Elementen mit der Klasse „Container“ befinden, fett. 🎜
🎜Adjacent Sibling Selector: 🎜🎜🎜Der Adjacent Sibling Selector wählt Elemente anhand ihrer benachbarten Geschwisterbeziehung aus. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code setzt den oberen Rand des <p></p>-Elements, das unmittelbar auf das <h1></h1>-Element folgt, auf 10 Pixel. 🎜
🎜Pseudoklassenselektor: 🎜🎜🎜Pseudoklassenselektor wählt Elemente anhand des spezifischen Zustands des Elements aus, z. B. Mauszeiger, angegebene Position usw. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code setzt die Textfarbe auf Lila, wenn Sie mit der Maus über den Link fahren. 🎜
🎜Pseudo-Element-Selektor: 🎜🎜🎜Der Pseudo-Element-Selektor wird verwendet, um einen bestimmten Teil des Elements auszuwählen, z. B. den ersten Buchstaben des Elements, das letzte untergeordnete Element usw. 🎜🎜Codebeispiel: 🎜rrreee🎜Der obige Code legt die Schriftgröße des ersten Buchstabens jedes <p></p>-Elements auf 24 Pixel fest. 🎜🎜Das Obige sind einige häufig verwendete CSS-Selektoren und ihre Codebeispiele. Durch das Verständnis und die flexible Verwendung dieser Selektoren können wir den Stil und die Struktur von Webseitenelementen einfacher steuern. Ich hoffe, dieser Artikel hilft Ihnen! 🎜

Das obige ist der detaillierte Inhalt vonLernen Sie gängige CSS-Selektoren kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!