Maison  >  Article  >  interface Web  >  Que signifient les pseudo-classes et les pseudo-objets en CSS

Que signifient les pseudo-classes et les pseudo-objets en CSS

WBOY
WBOYoriginal
2022-04-27 18:19:032128parcourir

En CSS, les pseudo-classes signifient définir des états spéciaux d'éléments. Vous pouvez ajouter des effets spéciaux de sélecteurs, qui sont certaines fonctionnalités et fonctions données par les pseudo-objets CSS permettant d'ajouter des effets spéciaux à certains éléments. . Le sélecteur signifie que l'effet peut être obtenu en ajoutant des éléments réels.

Que signifient les pseudo-classes et les pseudo-objets en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quelle est la signification des pseudo-classes et des pseudo-objets en CSS

pseudo-classes

Les pseudo-classes CSS sont utilisées pour définir des états spéciaux d'éléments

Les pseudo-classes CSS sont utilisées pour ajouter des effets de certains sélecteurs.

Explication : On a l'impression que les pseudo-classes peuvent être dynamiques et qu'un élément peut gagner ou perdre une pseudo-classe lorsque l'utilisateur interagit avec le document. Les exceptions sont ":first-child" qui peut être déduit de l'arborescence du document, et ":lang" qui est également déduit de l'arborescence du document dans certains cas.

On voit que sa fonction est quelque peu similaire à celle d'une classe, mais elle est basée sur une abstraction en dehors du document, c'est pourquoi on l'appelle une pseudo-classe. [1]

Les pseudo-classes incluent : :first-child, :link:, visited, :hover:, :active, :focus, :lang, :right, :left, :first

Que sont les pseudo-classes ? C'est css La classe CSS intégrée elle-même lui donne certaines caractéristiques et fonctions, c'est-à-dire que vous pouvez l'utiliser directement sans ajouter class=... ou id=.... Bien sûr, vous pouvez également modifier certains de ses attributs, tels que : a:link {color:#FF0000;}

De nombreuses suggestions CSS ne sont pas prises en charge par les navigateurs, mais il existe quatre pseudo-classes qui peuvent être utilisées en toute sécurité sur les hyperliens.

Syntaxe de la pseudo-classe :

selector:pseudo-class {
  property: value;
}

Pseudo-objet

Pseudo-élément : utilisé pour ajouter des effets spéciaux à certains sélecteurs

Le pseudo-élément CSS représente un élément enfant d'un élément Bien que cet élément enfant existe logiquement, mais n'existe pas. existent réellement dans l'arborescence du document.

Les pseudo-éléments sont utilisés pour créer des éléments qui ne sont pas dans l'arborescence du document et leur ajouter des styles. En fait, les pseudo-éléments sont des choses qui ne peuvent pas être faites par des sélecteurs ordinaires avant ou après certains éléments. Le contenu du contrôle est le même que celui de l'élément, mais il s'agit lui-même d'une abstraction basée sur les éléments et n'existe pas dans la structure du document. Par exemple, nous pouvons utiliser :before pour ajouter du texte devant un élément et ajouter des styles à ce texte.

La syntaxe des pseudo-éléments :

selector::pseudo-element{property:value;}
标签:伪元素{性质:值;}

Les classes CSS peuvent également être utilisées avec des pseudo-éléments :

selector.class::pseudo-element{property:value;}
标签类:伪元素{性质:值;}

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!

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