Quels sont les sélecteurs de base du CSS ?

Les sélecteurs de base de CSS sont utilisés pour faire correspondre les éléments dans les documents HTML, notamment : le sélecteur de type (nom d'élément correspondant) ; le sélecteur de classe (nom de classe correspondant) ; le sélecteur de descendant (ID correspondant) ; à l'intérieur ; Sélecteur d'élément enfant (correspond aux éléments enfants directs) ; Sélecteur frère adjacent (correspond aux éléments frères directement adjacents) ;

Sélecteurs de base en CSS

Les sélecteurs de base en CSS sont utilisés pour faire correspondre les éléments d'un document HTML. En utilisant ces sélecteurs, vous pouvez spécifier des styles pour des éléments spécifiques.

Sélecteur de type

• element : correspond à tous les éléments avec le nom d'élément spécifié, par exemple, p signifie tous les paragraphes. element：匹配带有指定元素名的所有元素，例如 p 表示所有段落。

类选择器

• .class-name：匹配具有指定类名的所有元素，例如 .example 表示所有带有 example 类的元素。

ID 选择器

• #id-name：匹配具有指定 ID 的单个元素，例如 #header 表示带有 header ID 的元素。

后代选择器

• ancestor descendant：匹配位于祖先元素内的后代元素，例如 ul li 表示所有位于 ul 元素内的 li 元素。

子元素选择器

• parent > child：匹配作为父元素直接子元素的子元素，例如 div > p 表示所有直接位于 div 元素内的 p 元素。

相邻兄弟选择器

• element + adjacent：匹配直接出现在指定元素之后的相邻元素，例如 p + h2 表示所有直接位于 p 元素之后的 h2 元素。

通用兄弟选择器

• element ~ sibling：匹配所有出现在指定元素之后的兄弟元素，包括相邻元素和更远的元素，例如 h1 ~ p 表示所有位于 h1 元素之后的 p 元素。

属性选择器

• [attribute]：匹配具有指定属性的元素，例如 [href] 表示所有具有 href 属性的元素。
• [attribute=value]：匹配具有指定属性并具有指定值的元素，例如 [href="example.com"] 表示所有 href

🎜Sélecteur de classe🎜🎜🎜🎜.class-name : correspond à tous les éléments avec le nom de classe spécifié, par exemple, .example signifie tous les éléments avec exemple Éléments de la classe . 🎜🎜🎜🎜Sélecteur d'ID🎜🎜🎜🎜#id-name : correspond à un seul élément avec l'ID spécifié, par exemple, #header signifie avec header élément d'identification. 🎜🎜🎜🎜Sélecteur de descendant🎜🎜🎜🎜<code>descendant ancêtre : correspond aux éléments descendants situés dans les éléments ancêtres, par exemple, ul li signifie tous les éléments situés dans ul élément <code>li dans l'élément. 🎜🎜🎜🎜Sélecteur d'élément enfant🎜🎜🎜🎜parent > child : correspond aux éléments enfants qui sont des enfants directs de l'élément parent, par exemple, div > p représente all direct Un élément p situé dans un élément div. 🎜🎜🎜🎜Sélecteur de frères et sœurs adjacents🎜🎜🎜🎜element + adjacent : correspond aux éléments adjacents qui apparaissent directement après l'élément spécifié, tels que p + h2 signifie que tous sont directs. Le h2 qui suit l'élément p. 🎜🎜🎜🎜Sélecteur universel de frères et sœurs🎜🎜🎜🎜element ~ sibling : correspond à tous les éléments frères qui apparaissent après l'élément spécifié, y compris les éléments adjacents et d'autres éléments, tels que h1 ~ p code> représente tous les éléments <code>p qui suivent l'élément h1. 🎜🎜🎜🎜Sélecteur d'attribut🎜🎜🎜🎜[attribute] : correspond aux éléments avec des attributs spécifiés, tels que [href] signifie tous les éléments avec href attribut de l'élément. 🎜🎜[attribute=value] : fait correspondre les éléments avec l'attribut spécifié et la valeur spécifiée, par exemple, [href="example.com"] signifie tous les href Élément avec la valeur d'attribut "example.com". 🎜🎜

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!