Welche Selektoren gibt es in CSS?

<p>CSS ist eine Stylesheet-Sprache für Webdesign, mit der Sie das Erscheinungsbild und Layout von Webseiten steuern können. Der Selektor ist einer der wichtigsten Teile von CSS, der uns dabei helfen kann, das HTML-Element zu finden, dessen Stil wir ändern möchten. In diesem Artikel werden die häufig verwendeten Selektortypen in CSS ausführlich vorgestellt.

<p>1. Basis-Selektor

<li> Tag-Selektor: Elemente nach HTML-Tag-Namen auswählen.

<p>Zum Beispiel:

p {
  color: red;
}

<p>Der obige Code ändert die Textfarbe aller <p>-Elemente im HTML-Dokument in Rot. <p>元素的文字颜色改为红色。

<li>类选择器：通过class属性选择一个或多个元素。

<p>例如：

.blue {
  color: blue;
}

<p>上面的代码会将所有拥有class属性为"blue"的元素的文字颜色改为蓝色。

<li>ID选择器：通过id属性选择一个唯一的元素。

<p>例如：

#header {
  width: 100%;
}

<p>上面的代码会将拥有id属性为"header"的元素的宽度调整为100%。

<p>二、组合选择器

<li>后代选择器：选择后代元素。

<p>例如：

header nav {
  background-color: blue;
}

<p>上面的代码会将<header>元素下的所有<nav>元素的背景颜色改为蓝色。

<li>子元素选择器：选择子元素。

<p>例如：

ul > li {
  font-size: 16px;
}

<p>上面的代码会将所有的<ul>元素中的直接子元素<li>的字体大小设置为16像素。

<p>三、属性选择器

<li>属性选择器：通过属性名称来选择元素。

<p>例如：

a[href="https://www.example.com"] {
  color: green;
}

<p>上面的代码会将所有链接到https://www.example.com的锚点元素颜色设置为绿色。

<li>存在选择器：选择所有包含该属性的元素。

<p>例如：

input[type="text"] {
  background-color: #f2f2f2;
}

<p>上面的代码会将所有拥有type属性为"text"的<input>元素的背景颜色设置为灰白色。

<p>四、伪类选择器

<li>链接伪类：通过元素是否为链接来选择元素。

<p>例如：

a:hover {
  color: red;
}

<p>上面的代码会将所有在鼠标悬停时的链接的颜色设置为红色。

<li>焦点伪类：通过用户是否已将某个元素设置为焦点来选择元素。

<p>例如：

input:focus {
  border: 2px solid green;
}

<p>上面的代码会在用户将某个<input>元素设置为焦点时，将该元素的边框颜色设置为绿色。

<p>五、伪元素选择器

<li>::before 和 ::after：在被选择元素的内容的前面或后面插入生成的内容。

<p>例如：

h1::before {
  content: ">> ";
}

<p>上面的代码会在所有<h1>元素的前面插入一个带有两个大于号的内容。

<li>::first-letter 和 ::first-line：选择元素的第一个字母或第一行文本。

<p>例如：

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

<p>上面的代码会将每个<p>

Klassenselektor: Wählen Sie ein oder mehrere Elemente über das Klassenattribut aus. <p>
<p>Zum Beispiel:
rrreee🎜Der obige Code ändert die Textfarbe aller Elemente mit dem Klassenattribut "blue" in Blau. 🎜
🎜ID-Selektor: Wählen Sie ein eindeutiges Element über das ID-Attribut aus. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code passt die Breite des Elements mit dem ID-Attribut "header" auf 100 % an. 🎜🎜2. Kombinationsselektor🎜🎜🎜Nachkommenselektor: Nachkommenelemente auswählen. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code ändert die Hintergrundfarbe aller <nav>-Elemente unter dem <header>-Element in Blau. 🎜
🎜Wähler für untergeordnete Elemente: Untergeordnete Elemente auswählen. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code legt die Schriftgröße aller direkten untergeordneten Elemente <li> im Element <ul> auf 16 Pixel fest . 🎜🎜3. Attributselektor 🎜🎜🎜Attributselektor: Elemente nach Attributnamen auswählen. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code setzt die Farbe aller mit https://www.example.com verknüpften Ankerelemente auf Grün. 🎜
🎜Selektor existiert: wählt alle Elemente aus, die dieses Attribut enthalten. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code setzt die Hintergrundfarbe aller <input>-Elemente mit dem Typattribut "text" auf gebrochenes Weiß . 🎜🎜4. Pseudoklassenselektor 🎜🎜🎜Link-Pseudoklasse: Wählen Sie Elemente basierend darauf aus, ob es sich um Links handelt. 🎜🎜🎜Beispiel: 🎜rrreee🎜Der obige Code setzt die Farbe aller Links beim Mouseover auf Rot. 🎜
🎜Focus-Pseudoklasse: Wählen Sie ein Element basierend darauf aus, ob der Benutzer den Fokus auf ein Element gesetzt hat. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code setzt die Rahmenfarbe eines <input>-Elements auf Grün, wenn der Benutzer das Element auf Fokus setzt. 🎜🎜5. Pseudo-Element-Selektor🎜🎜🎜::before und ::after: Fügt den generierten Inhalt vor oder nach dem Inhalt des ausgewählten Elements ein. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code fügt einen Inhalt mit zwei Größer-als-Zeichen vor allen <h1>-Elementen ein. 🎜
🎜::first-letter und ::first-line: Wählen Sie den ersten Buchstaben oder die erste Textzeile des Elements aus. 🎜🎜🎜Zum Beispiel: 🎜rrreee🎜Der obige Code legt die Schriftgröße des ersten Buchstabens jedes <p>-Elements auf 20 Pixel fest. 🎜🎜Zusammenfassung: 🎜🎜Die oben genannten sind die häufig verwendeten Selektortypen in CSS, mit denen Webseiten verschiedene Stile besser anzeigen können. Beim tatsächlichen Webdesign können wir je nach Situation unterschiedliche Selektoren auswählen, um bessere Ergebnisse zu erzielen. 🎜

Das obige ist der detaillierte Inhalt vonWelche Selektoren gibt es in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!