p { color: red; }
<p>
-Elemente im Dokument auszuwählen und ihre Textfarbe auf Rot zu setzen. <p>
元素,并将其文字颜色设置为红色。class
属性来定义类名,并在CSS中使用.类名
的方式来选取元素。示例如下:<p class="highlight">这是一个有着highlight类的段落。</p>
.highlight { background-color: yellow; }
highlight
类的元素,并将其背景色设置为黄色。id
属性来定义ID,并在CSS中使用#ID
的方式来选取元素。示例如下:<p id="intro">这是一个拥有intro ID的段落。</p>
#intro { font-weight: bold; }
intro
ID的元素,并将其文字设置为粗体。input[type="text"] { background-color: lightblue; }
type
属性为text
的<input>
元素,并将其背景色设置为浅蓝色。div p { font-style: italic; }
元素内的<p>
Klassenselektor<p>Der Klassenselektor wählt Elemente durch Angabe des Klassennamens aus. In einem HTML-Dokument können Sie einen Klassennamen definieren, indem Sie das Attribut class
zu einem Element hinzufügen und .classname
verwenden, um Elemente in CSS auszuwählen. Ein Beispiel ist wie folgt: 🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜Der obige Code bedeutet, ein Element mit der Klasse highlight
auszuwählen und seine Hintergrundfarbe auf Gelb zu setzen. 🎜🎜ID-Selektor🎜ID-Selektor wählt Elemente durch Angabe der ID aus. In HTML-Dokumenten können Sie IDs definieren, indem Sie den Elementen das Attribut id
hinzufügen und in CSS #ID
verwenden, um Elemente auszuwählen. Ein Beispiel lautet wie folgt: 🎜🎜🎜HTML:🎜rrreee🎜CSS:🎜rrreee🎜Der obige Code bedeutet, das Element mit der intro
-ID auszuwählen und seinen Text auf Fett zu setzen. 🎜🎜Attribut-Selektor🎜Der Attribut-Selektor ermöglicht Entwicklern die Auswahl von Elementen basierend auf ihren Attributwerten. Zu den häufig verwendeten Attributselektoren gehören: Gleichheitsselektor, Startselektor, Endselektor und Enthält-Selektor. Ein Beispiel ist wie folgt: 🎜🎜🎜Gleichselektor: Wählt Elemente mit angegebenen Attributwerten aus. 🎜rrreee🎜Der obige Code zeigt an, dass alle type
-Attribute als text
<input>
ausgewählt sind und ihre Hintergrundfarbe auf Hellblau eingestellt ist. 🎜🎜Beziehungsselektor🎜Der Beziehungsselektor kann Elemente basierend auf der Beziehung zwischen Elementen auswählen. Zu den gängigen Beziehungsselektoren gehören Nachkommenselektoren, Selektoren für untergeordnete Elemente, Selektoren für benachbarte Geschwister und universelle Selektoren für Geschwister. Beispiele sind wie folgt: 🎜🎜🎜Descendant-Selektor: Wählen Sie die Nachkommenelemente eines Elements aus. 🎜rrreee🎜Der obige Code bedeutet, alle <p>
-Elemente innerhalb des <div>-Elements auszuwählen und ihren Textstil auf Kursiv zu setzen. 🎜🎜Die oben genannten sind nur ein Teil der CSS3-Selektoren. Es gibt viele andere Selektoren, die zum Auswählen von Elementen verwendet werden können. Durch den flexiblen Einsatz von CSS3-Selektoren können Entwickler den Stil der Seite besser steuern und anpassen und das Benutzererlebnis verbessern. 🎜</div>
Das obige ist der detaillierte Inhalt vonWas ist die Hauptfunktion von CSS3-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!