Maison > interface Web > tutoriel CSS > Quels sont les sélecteurs de base en CSS ?

Quels sont les sélecteurs de base en CSS ?

下次还敢
Libérer: 2024-04-25 13:27:16
original
766 Les gens l'ont consulté

Les sélecteurs CSS sont utilisés pour sélectionner et manipuler des éléments HTML, notamment : Sélecteurs universels : sélectionnez tous les éléments. Sélecteur d'élément : sélectionne l'élément portant le nom d'élément spécifié. Sélecteur de classe : sélectionne les éléments avec le nom de classe spécifié. Sélecteur d'ID : sélectionne les éléments avec un ID spécifié. Sélecteur descendant : sélectionne les éléments descendants qui appartiennent à l'élément ancêtre spécifié. Sélecteur d'élément enfant : sélectionne les éléments enfants qui appartiennent directement à l'élément parent spécifié. Sélecteur de frère adjacent : sélectionne l'élément frère qui suit immédiatement l'élément frère spécifié. Sélecteur universel de frères et sœurs : sélectionne tous les éléments frères adjacents à l'élément spécifié.

Quels sont les sélecteurs de base en CSS ?

CSS Basic Selector

Le sélecteur CSS est utilisé pour sélectionner et manipuler des éléments HTML dans des documents HTML. Il existe plusieurs types de sélecteurs CSS différents, chacun servant un objectif spécifique.

Sélecteur universel

  • * : Sélectionnez tous les éléments. *:选择所有元素。

元素选择器

  • 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
🎜Sélecteur d'élément🎜🎜🎜🎜element_name : sélectionne les éléments avec le nom d'élément spécifié. Par exemple, p sélectionne tous les éléments de paragraphe. 🎜🎜🎜🎜Sélecteur de classe🎜🎜🎜🎜.class_name : sélectionnez les éléments avec le nom de classe spécifié. Par exemple, .btn sélectionne tous les éléments avec la classe btn. 🎜🎜🎜🎜Sélecteur d'ID🎜🎜🎜🎜#id_name : sélectionne les éléments avec l'ID spécifié. Par exemple, #header sélectionne l'élément avec l'ID header. 🎜🎜🎜🎜Sélecteur descendant🎜🎜🎜🎜ancestor_element descendant_element : Sélectionnez les éléments descendants qui appartiennent à l'élément ancêtre spécifié. Par exemple, body .btn sélectionne tous les éléments qui sont des éléments body et qui ont la classe btn. 🎜🎜🎜🎜Sélecteur d'élément enfant🎜🎜🎜🎜parent_element > child_element : sélectionne les éléments enfants qui appartiennent directement à l'élément parent spécifié. Par exemple, ul > li sélectionne tous les éléments li qui font directement partie d'un élément ul. 🎜🎜🎜🎜Sélecteur d'élément frère adjacent🎜🎜🎜🎜previous_sibling_element + next_sibling_element : Sélectionnez l'élément frère immédiatement après l'élément frère spécifié. Par exemple, p + h2 sélectionne l'élément h2 immédiatement après l'élément p. 🎜🎜🎜🎜Sélecteur universel d'éléments frères et sœurs🎜🎜🎜🎜~ sibling_element : sélectionne tous les éléments frères adjacents à l'élément spécifié. Par exemple, p ~ h2 sélectionne tous les éléments h2 adjacents à un élément p. 🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal