Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was sind die grundlegenden Selektoren in CSS?

下次还敢
Freigeben: 2024-04-25 13:27:16
Original
757 Leute haben es durchsucht

CSS-Selektoren werden zum Auswählen und Bearbeiten von HTML-Elementen verwendet, einschließlich: Universelle Selektoren: Alle Elemente auswählen. Elementselektor: Wählt das Element mit dem angegebenen Elementnamen aus. Klassenselektor: wählt Elemente mit dem angegebenen Klassennamen aus. ID-Selektor: Wählt Elemente mit einer angegebenen ID aus. Nachkommenselektor: Wählt Nachkommenelemente aus, die zum angegebenen Vorgängerelement gehören. Selektor für untergeordnete Elemente: Wählt untergeordnete Elemente aus, die direkt zum angegebenen übergeordneten Element gehören. Benachbarter Geschwister-Selektor: Wählt das Geschwisterelement aus, das unmittelbar auf das angegebene Geschwisterelement folgt. Universeller Geschwisterselektor: Wählt alle Geschwisterelemente neben dem angegebenen Element aus.

Was sind die grundlegenden Selektoren in CSS?

CSS Basic Selector

CSS Selector wird zum Auswählen und Bearbeiten von HTML-Elementen in HTML-Dokumenten verwendet. Es gibt verschiedene CSS-Selektortypen, die jeweils einem bestimmten Zweck dienen.

Universal Selector

  • *: Alle Elemente auswählen. *:选择所有元素。

元素选择器

  • element_name:选择具有指定元素名称的元素。例如,p 选择所有段落元素。

类选择器

  • .class_name:选择具有指定类名的元素。例如,.btn 选择所有具有 btn 类的元素。

ID 选择器

  • #id_name:选择具有指定 ID 的元素。例如,#header 选择具有 header ID 的元素。

后代选择器

  • ancestor_element descendant_element:选择属于指定祖先元素的后代元素。例如,body .btn 选择所有属于 body 元素并具有 btn 类的元素。

子元素选择器

  • parent_element > child_element:选择直接属于指定父元素的子元素。例如,ul > li 选择所有直接属于 ul 元素的 li 元素。

相邻兄弟元素选择器

  • previous_sibling_element + next_sibling_element:选择紧接在指定兄弟元素之后的兄弟元素。例如,p + h2 选择紧接在 p 元素之后的 h2 元素。

通用兄弟元素选择器

  • ~ sibling_element:选择与指定元素相邻的所有兄弟元素。例如,p ~ h2 选择所有与 p 元素相邻的 h2
🎜Elementselektor🎜🎜🎜🎜element_name: Wählt Elemente mit dem angegebenen Elementnamen aus. Beispielsweise wählt p alle Absatzelemente aus. 🎜🎜🎜🎜Klassenselektor🎜🎜🎜🎜.class_name: Elemente mit dem angegebenen Klassennamen auswählen. Beispielsweise wählt .btn alle Elemente mit der Klasse btn aus. 🎜🎜🎜🎜ID-Selektor🎜🎜🎜🎜#id_name: Wählt Elemente mit der angegebenen ID aus. Beispielsweise wählt #header das Element mit der ID header aus. 🎜🎜🎜🎜Nachkommenselektor🎜🎜🎜🎜ancestor_element dependant_element: Wählen Sie Nachkommenelemente aus, die zum angegebenen Vorfahrenelement gehören. Beispielsweise wählt body .btn alle Elemente aus, die body-Elemente sind und die Klasse btn haben. 🎜🎜🎜🎜Wähler für untergeordnete Elemente🎜🎜🎜🎜parent_element > child_element: Wählt untergeordnete Elemente aus, die direkt zum angegebenen übergeordneten Element gehören. Beispielsweise wählt ul > li alle li-Elemente aus, die direkt Teil eines ul-Elements sind. 🎜🎜🎜🎜Selektor für benachbarte Geschwisterelemente🎜🎜🎜🎜 previous_sibling_element + next_sibling_element: Wählen Sie das Geschwisterelement aus, das unmittelbar auf das angegebene Geschwisterelement folgt. Beispielsweise wählt p + h2 das Element h2 aus, das unmittelbar auf das Element p folgt. 🎜🎜🎜🎜Universeller Selektor für Geschwisterelemente🎜🎜🎜🎜~ sibling_element: Wählt alle Geschwisterelemente neben dem angegebenen Element aus. Beispielsweise wählt p ~ h2 alle h2-Elemente neben einem p-Element aus. 🎜🎜

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

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage