Comment utiliser les pseudo-classes et les pseudo-éléments en CSS
La pseudo-classe peut ajouter des effets spéciaux au sélecteur via des méthodes telles que le lien et le survol. Le pseudo-élément utilise : first-line pour ajouter le style de première ligne et :first-letter à. ajouter la lettre initiale. Ceci sera décrit en détail ci-dessous. Les deux
Pseudo-classe
C'est une façon de sélectionner. certaines parties d'un document HTML, représentant au fil du temps L'état dynamique des éléments lors de l'entrée ou de la sortie via l'intervention de l'utilisateur, n'appartient en principe pas à l'arborescence du document HTML elle-même et à ses éléments ou attributs. En fait, des pseudo-classes CSS sont utilisées. pour ajouter quelques effets spéciaux de sélecteurs, et pseudo- Différents éléments, les pseudo-classes peuvent apparaître n'importe où dans la chaîne de sélection.
Exemple
un lien : représente un lien non visité
<style>
a:link{
background-color: pink;
}
a : la visite représente le lien visité
a:visited{
background-color: pink;
}
a : survoler Lorsque la souris bouge sur le lien
a:hover{
background-color: pink;
}
a:hover doit être situé après a:link et a:visited pour que cela prenne effet !
a : actif : indique le lien sélectionné
a:hover{
background-color: pink;
}
a:active{
background-color: pink;
}
Notez qu'actif doit être utilisé après le survol. Prend effet
pseudo-élément
le pseudo-élément est utilisé pour définir des effets spéciaux sur certains sélecteurs et ne peut être appliqué qu'en externe et au niveau du contexte du document, plutôt que des styles en ligne. Ils ne peuvent apparaître qu'à la fin d'une chaîne de sélecteurs, et chaque sélecteur ne peut spécifier qu'un seul pseudo-élément. Pour gérer plusieurs pseudo-éléments sur une structure d'élément unique, vous devez créer plusieurs sélecteurs de style ou instructions de déclaration.
: pseudo-élément de première ligne
est utilisé pour définir un style spécial sur la première ligne de texte. Il ne peut être utilisé que pour les éléments de niveau bloc.
peut être modifié. Les attributs suivants : police, couleur, arrière-plan, espacement des mots, espacement des lettres, etc.
p:first-line
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!
</p>sont applicables à. la première ligne
: pseudo-élément de première lettre
est utilisé pour définir des styles spéciaux pour la première lettre du texte :
peut modifier la police, la couleur, l'arrière-plan, la marge, le remplissage, la bordure. Les attributs tels que
p:first-letter
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!ne sont applicables qu'à la première lettre
Résumé : Ce qui précède représente l'intégralité du contenu de cet article. Oui, j'espère qu'il sera utile à l'étude de chacun.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Pourquoi les pseudo-éléments échouent-ils ?
Nov 21, 2023 pm 05:13 PM
Raisons de l'échec des pseudo-éléments : 1. Problèmes de sélecteur ; 2. Conflits de style ; 3. Problèmes d'héritage ; 4. Problèmes de compatibilité du navigateur ; Introduction détaillée : 1. Problème de sélecteur, le sélecteur du pseudo-élément peut être incorrect, ce qui empêche la sélection de l'élément cible ; 2. Conflit de style, s'il y a un conflit de style dans CSS, le pseudo-élément peut devenir invalide ; 3. Problème d'héritage, les pseudo-éléments peuvent ne pas hériter de certains attributs de style ; 4. Erreurs de syntaxe dans CSS, les pseudo-éléments peuvent échouer ; 5. Problèmes de compatibilité du navigateur, etc.
Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3
Nov 20, 2023 am 11:20 AM
Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3. L'exemple de code spécifique est le suivant : Code HTML : <divid="container" ><divclass="item"> ;Premier élément enfant</div><divclass="item"&
Implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder
Nov 20, 2023 pm 03:17 PM
Pour implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder, des exemples de code spécifiques sont nécessaires dans le développement Web, CSS est un langage de feuille de style couramment utilisé pour contrôler la mise en page et le style des pages Web. Le sélecteur de pseudo-élément ::placeholder est un nouveau sélecteur en CSS3, qui est utilisé pour modifier le style d'espace réservé des zones de saisie (y compris les zones de saisie de texte, les zones de saisie de mot de passe, etc.). Ci-dessous, nous présenterons divers scénarios d'application et fournirons des exemples de code correspondants. Modifiez la couleur de l'espace réservé de la zone de saisie :
analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css
Aug 03, 2022 am 11:26 AM
Dans l'article précédent "Apprentissage des pseudo-sélecteurs CSS : analyse des sélecteurs de pseudo-éléments", nous avons découvert les sélecteurs de pseudo-éléments, et aujourd'hui, nous examinons de plus près les sélecteurs de pseudo-classes, j'espère que cela sera utile à tout le monde !
Pourquoi le survol est un pseudo-élément
Oct 09, 2023 pm 05:45 PM
Hover n'est pas un pseudo-élément, c'est une pseudo-classe. Les pseudo-classes sont utilisées pour sélectionner un état ou un comportement spécifique d'un élément, tandis que les pseudo-éléments sont utilisés pour ajouter des styles à des parties spécifiques d'un élément. Parce que :hover est utilisé pour sélectionner un état spécifique d'un élément plutôt que d'ajouter des styles à une partie spécifique de l'élément, vous pouvez utiliser la pseudo-classe :hover pour styliser l'état de survol d'un élément, et vous pouvez utiliser le :hover pseudo-classe pour ajouter des effets de survol aux liens. La couleur du lien, la couleur d'arrière-plan, etc. peuvent changer lorsque la souris le survole.
Utilisez le sélecteur de pseudo-classe :active pour implémenter les styles CSS pour les effets de clic de souris
Nov 20, 2023 am 09:26 AM
Styles CSS utilisant le sélecteur de pseudo-classe :active pour obtenir des effets de clic de souris CSS est un langage de feuille de style en cascade utilisé pour décrire les performances et le style des pages Web. :active est un sélecteur de pseudo-classe en CSS, utilisé pour sélectionner l'état d'un élément lorsque l'on clique sur la souris. En utilisant le sélecteur de pseudo-classe :active, nous pouvons ajouter des styles spécifiques à l'élément cliqué pour obtenir l'effet de clic de souris. Ce qui suit est un exemple de code simple qui montre comment utiliser le sélecteur de pseudo-classe :active pour obtenir un effet de clic de souris.
Explorez les concepts de base et les scénarios d'utilisation des pseudo-classes et pseudo-éléments CSS
Dec 23, 2023 pm 01:21 PM
Comprendre les concepts de base et les scénarios d'application des pseudo-classes et pseudo-éléments CSS. CSS (CascadingStyleSheets) est un langage de balisage utilisé pour décrire le style des pages Web. Il peut contrôler l'apparence et la disposition des éléments dans les pages Web. En CSS, les pseudo-classes et les pseudo-éléments sont des fonctions très utiles qui peuvent étendre davantage la portée d'application et la flexibilité du CSS. 1. Pseudo-classes Les pseudo-classes sont des mots-clés utilisés pour sélectionner des éléments d'état spécifiques. Les pseudo-classes courantes incluent : survol, actif, focus, etc. Voici quelques exemples courants
A quoi sert d'ajouter des pseudo éléments ?
Oct 09, 2023 pm 05:45 PM
Les pseudo-éléments peuvent être utilisés pour créer des effets décoratifs, obtenir des effets de mise en page spécifiques, créer des effets interactifs, modifier des états d'éléments spécifiques et créer des effets spéciaux. Introduction détaillée : 1. Créez des effets décoratifs. En définissant les attributs de contenu et les styles du pseudo-élément :before ou :after, vous pouvez insérer des icônes, des formes ou d'autres éléments décoratifs avant ou après l'élément, afin de pouvoir ajouter plus d'éléments. à la page Web. Attrait visuel et personnalisation ; 2. Obtenez des effets de mise en page spécifiques, qui peuvent être créés via des pseudo-éléments : before et :after, etc.
