Maison > Article > interface Web > La différence entre les pseudo-classes CSS et les pseudo-éléments
Les pseudo-classes et les pseudo-éléments sont indépendants de la structure du document. La façon dont ils obtiennent les éléments n'est pas basée sur les caractéristiques de base des éléments telles que l'identifiant, la classe et les attributs, mais sur des éléments (pseudo-classes) dans un état. Ou contenu spécial dans l'élément (pseudo-élément). Les différences sont résumées comme suit :
Attribut | Description | tr>||||||||||||||||
:activeCSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 |
est activé Ajouter des styles aux éléments | ||||||||||||||||
:focus
|
Ajoutez des styles aux éléments avec le focus de saisie au clavier | ||||||||||||||||
:hover备注:在 CSS 定义中,同一个元素的 :hover 必须位于 :link、:visited 之后才能生效,:active 必须位于 :hover 之后才能生效。 |
Ajouter des styles aux éléments lorsque la souris les survole | ||||||||||||||||
:link | Ajouter des styles aux liens non visités | ||||||||||||||||
:visited | Au lien visité en ajoutant le style td> | ||||||||||||||||
:premier-enfant | Ajouter un style au premier élément enfant de l'élément | ||||||||||||||||
:lang | Ajouter des styles aux éléments avec l'attribut lang spécifié |
属性 | 描述 |
:first-letter | 向文本的第一个字母添加特殊样式 |
:first-line | 向文本的首行添加特殊样式 |
:before | 在元素之前添加内容 |
:after | 在元素之后添加内容 |
est utilisé pour définir des effets spéciaux sur certains sélecteurs. Il s'agit de définir et de faire fonctionner un contenu spécifique dans l'élément <a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c</a>
Le niveau de fonctionnement est plus profond que les pseudo-classes. la dynamique est pire que les pseudo-classes
Propriété | Description |
:first-letter | Ajouter un style spécial à la première lettre du texte |
:première ligne | Ajouter des styles spéciaux à la première ligne de texte |
:beforeCSS |
Ajouter du contenu avant l'élément |
:after | Ajouter du contenu après l'élément |
<a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c<li></a>
Définition des deux : CSS
:first-child
:first-letter
Les pseudo-éléments sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.
p>i:first-child {color: red}<p> <i>first</i> <i>second</i></p>
:first-child
Différence
.first-child {color: red}<p> <i class="first-child">first</i> <i>second</i></p>et le pseudo-élément
pour la comparaison.
p::first-letter {color: red}<p>I am stephen lee.</p>
// Pseudo-classe ::first-letter
Ajouter du style au premier élément enfant
Si nous n'utilisons pas de pseudo-classe et que nous voulons obtenir l'effet ci-dessus, nous pouvons faire ceci :
.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>
C'est-à-dire que nous ajoutons une classe au premier élément enfant, puis définissons le style de cette classe. Jetons ensuite un œil aux pseudo-éléments : span
span
//Pseudo-éléments
Donc si on n'utilise pas de pseudo-éléments, que devrait que faisons-nous pour obtenir l'effet ci-dessus ?.Autrement dit, nous ajoutons un
à la première lettre, puis ajoutons un style à
css3
:Pseudo-classes ::Pseudo-elementsRésuméLa raison pour laquelle les pseudo-éléments et les pseudo-classes sont si faciles à confondre est que leurs effets sont similaires et leurs méthodes d'écriture sont similaires, mais en fait Afin de distinguer les deux, il a été clairement précisé que les pseudo-classes sont représentées par un deux-points, et les pseudo-éléments sont représentés par deux deux-points. Mais en raison de problèmes de compatibilité, la plupart d'entre eux utilisent encore un seul deux-points. Cependant, quels que soient les problèmes de compatibilité, nous devons faire de notre mieux pour développer de bonnes habitudes lors de l'écriture et faire la distinction entre les deux.
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!