Was sind die grundlegenden Selektoren in CSS?

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.

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!