Quels sont les sélecteurs en HTML5

Les sélecteurs

html5 incluent le sélecteur d'élément, le sélecteur de classe, le sélecteur d'ID, le sélecteur d'attribut, le sélecteur de pseudo-classe, le sélecteur de pseudo-élément, le sélecteur de descendant, le sélecteur d'élément enfant, le sélecteur de frère adjacent et les sélecteurs de frère universel, etc. Introduction détaillée : 1. Le sélecteur d'élément, utilisant le nom de l'élément comme sélecteur, signifie sélectionner tous les éléments portant le nom de l'élément ; 2. Le sélecteur de classe, utilisant le sélecteur commençant par un point, signifie sélectionner les éléments portant le nom de classe spécifié ; Sélecteur d'ID, utilisez le sélecteur commençant par le signe dièse pour sélectionner l'élément avec l'ID spécifié, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

HTML5 n'introduit pas de nouveaux types de sélecteurs, il utilise toujours des sélecteurs CSS pour sélectionner et manipuler les éléments HTML. Différents sélecteurs définis en CSS2 et CSS3 peuvent toujours être utilisés en HTML5. Les types de sélecteurs suivants sont courants en HTML5 :

1. Sélecteur d'élément : utiliser le nom de l'élément comme sélecteur signifie sélectionner tous les éléments portant ce nom d'élément. Par exemple, « p » signifie sélectionner tous les éléments «

».

2. Sélecteur de classe : utilisez un sélecteur commençant par un point (.) pour sélectionner les éléments avec un nom de classe spécifié. Par exemple, « .red » signifie sélectionner tous les éléments portant le nom de classe « rouge ».

3. Sélecteur d'ID : utilisez le sélecteur commençant par le signe dièse (#) pour sélectionner l'élément avec l'ID spécifié. Par exemple, `#header` signifie sélectionner l'élément avec l'ID "header".

4. Sélecteur d'attributs : utilisez des crochets ([]) pour sélectionner les éléments avec les attributs spécifiés. Par exemple, `[href]` signifie sélectionner tous les éléments avec l'attribut href.

5. Sélecteur de pseudo-classe : utilisez un sélecteur commençant par deux points (:) pour sélectionner les éléments qui répondent à un certain statut ou condition. Par exemple, `:hover` indique l'état de sélection lorsque la souris survole l'élément.

6. Sélecteur de pseudo-éléments : utilisez un sélecteur commençant par un double deux-points (::) pour sélectionner une partie spécifique de l'élément. Par exemple, `::before` représente le contenu inséré avant l'élément sélectionné.

7. Sélecteur descendant : utilisez un sélecteur séparé par des espaces pour sélectionner les éléments descendants d'un élément. Par exemple, `div p` signifie sélectionner tous les éléments `

` qui sont des descendants des éléments `

`.

8. Sélecteur enfant : utilisez un sélecteur séparé par un signe supérieur à (>) pour sélectionner les éléments enfants directs d'un élément. Par exemple, `div > p` ​​​​signifie sélectionner tous les éléments `

` qui sont des enfants directs de l'élément `

`.

9. Sélecteur de frères et sœurs adjacents : un sélecteur séparé par un signe plus (+), indiquant que le premier élément frère suivant immédiatement un élément est sélectionné. Par exemple, `h1 + p` signifie sélectionner le premier élément `

` immédiatement après l'élément `

`.

10. Sélecteur général de frères et sœurs : utilisez un sélecteur séparé par un tilde (~) pour sélectionner tous les éléments frères après un élément. Par exemple, `h1 ~ p` signifie sélectionner tous les éléments `

` après l'élément `

`.

Les types de sélecteurs ci-dessus sont courants en HTML5. Ils peuvent sélectionner et utiliser des éléments HTML en fonction du nom de l'élément, du nom de la classe, de l'ID, des attributs, du statut, de la position et d'autres conditions. En utilisant rationnellement ces sélecteurs, nous pouvons sélectionner et styliser avec précision les éléments des documents HTML, obtenir des effets riches et diversifiés et améliorer l'interactivité et l'attrait visuel des pages Web.

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!

html5 css css3 html class Attribute href 选择器 伪类 伪元素

Déclaration：

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

Article précédent：Pourquoi l'élément parent doit-il définir sa position ?Article suivant：Pourquoi l'élément parent doit-il définir sa position ?

Articles Liés

Voir plus

• Comment utiliser la balise audio html5 ? Exemple de code d'implémentation de la lecture automatique HTML5
• Que signifie la balise de section html5 ? Résumé de l'utilisation de la balise de section HTML5
• Qu'est-ce qu'un sélecteur CSS ? 5 sélecteurs de base courants en CSS3 (exemples de code)
• Quelle est la différence entre html5 et html
• Quels navigateurs prennent en charge HTML5