Was sind die CSS3-Selektoren?

CSS3-Selektoren sind Teil von CSS3 und werden zur Auswahl von Elementen in HTML-Dokumenten verwendet. Sie können Elemente anhand von Kriterien wie Typ, Attributen, Status und Standort auswählen.

Im Folgenden sind einige häufig verwendete CSS3-Selektoren und ihre Codebeispiele aufgeführt:

1. Elementselektor:
   Elemente anhand ihres Namens auswählen.

   Beispielcode:

   p {
     color: red;
   }

   Der obige Code wählt alle <p></p>-Elemente aus und setzt ihre Farbe auf Rot. <p></p> 元素，并将它们的颜色设置为红色。

2. 类选择器（Class Selector）:
   通过元素的 class 属性来选择元素。

   示例代码：

   .highlight {
     background-color: yellow;
   }

   以上代码会选择所有带有 "highlight" 类的元素，并将它们的背景颜色设置为黄色。

3. ID 选择器（ID Selector）:
   通过元素的 id 属性来选择元素。

   示例代码：

   #main-title {
     font-size: 24px;
   }

   以上代码会选择具有 "main-title" id 的元素，并将其字体大小设置为 24 像素。

4. 属性选择器（Attribute Selector）:
   通过元素的属性值来选择元素。

   示例代码：

   input[type="text"] {
     border: 1px solid gray;
   }

   以上代码会选择所有 type 属性为 "text" 的 input 元素，并将它们的边框设置为灰色。

5. 伪类选择器（Pseudo-class Selector）:
   通过元素的特殊状态来选择元素，例如 :hover、:nth-child() 等。

   示例代码：

   a:hover {
     color: blue;
   }

   以上代码会选择当鼠标悬停在链接上时的 <a></a> 元素，并将其颜色设置为蓝色。

6. 伪元素选择器（Pseudo-element Selector）:
   通过元素的特殊位置来选择元素，例如 ::before、::after 等。

   示例代码：

   p::before {
     content: "Chapter: ";
     font-weight: bold;
   }

   以上代码会在每个 <p></p>

Klassenselektor:

Wählen Sie Elemente über ihr Klassenattribut aus.

🎜Beispielcode: 🎜rrreee🎜Der obige Code wählt alle Elemente mit der Klasse „highlight“ aus und setzt ihre Hintergrundfarbe auf Gelb. 🎜🎜🎜🎜ID-Selektor:🎜Wählen Sie Elemente über ihr ID-Attribut aus. 🎜🎜Beispielcode: 🎜rrreee🎜Der obige Code wählt das Element mit der „Haupttitel“-ID aus und legt seine Schriftgröße auf 24 Pixel fest. 🎜🎜🎜🎜Attributauswahl:🎜Wählen Sie Elemente anhand ihrer Attributwerte aus. 🎜🎜Beispielcode: 🎜rrreee🎜Der obige Code wählt alle Eingabeelemente aus, deren Typattribut „Text“ ist, und setzt ihre Ränder auf Grau. 🎜🎜🎜🎜Pseudoklassenselektor: 🎜Wählen Sie Elemente anhand ihres Sonderstatus aus, z. B. :hover, :nth-child() usw. . 🎜🎜Beispielcode: 🎜rrreee🎜Der obige Code wählt das Element <a></a> aus, wenn sich die Maus über dem Link befindet, und setzt seine Farbe auf Blau. 🎜🎜🎜🎜Pseudo-Element-Selektor: 🎜Wählen Sie Elemente anhand ihrer speziellen Positionen aus, z. B. ::before, ::after usw. 🎜🎜Beispielcode: 🎜rrreee🎜Der obige Code fügt vor jedem <p></p>-Element ein Pseudoelement mit dem Inhalt „Chapter:“ hinzu und macht dessen Schriftart fett. 🎜🎜🎜🎜Dies ist nur eine kleine Auswahl an CSS3-Selektoren, es stehen viele andere für eine spezifischere Auswahl zur Verfügung. Durch die entsprechende Verwendung dieser Selektoren können Sie Elemente in einem HTML-Dokument präziser auswählen und formatieren. 🎜

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