Pseudo-classes et pseudo-éléments en CSS et leurs différences

Cet article présente principalement l'explication détaillée de la pseudo-classe et du pseudo-élément en CSS et la différence entre les deux. En fait, CSS3 standardise une méthode simple et grossière, c'est-à-dire l'utilisation d'un pseudo. -class avant Il est représenté par deux points, et deux deux-points sont utilisés avant le pseudo-élément, afin qu'il ne soit pas facilement confondu. Les amis dans le besoin peuvent se référer au concept et à la fonction de

Pseudo-classe CSS
Les pseudoclasses CSS (Pseudoclasses) sont les boulons des sélecteurs, utilisés pour spécifier l'état d'un sélecteur ou d'un sélecteur qui lui est lié. Leur forme est selector:pseudoclass{property:value;}, utilisez simplement un deux-points anglais demi-largeur (:) pour séparer le sélecteur et la pseudo-classe. De nombreuses suggestions CSS ne sont pas prises en charge par les navigateurs, mais il existe quatre pseudo-classes CSS qui peuvent être utilisées en toute sécurité pour les connexions.
1.link est utilisé pour les connexions d'accès.
2.visited est utilisé pour les connexions déjà visitées.
3.hover est utilisé pour la connexion sur laquelle le curseur de la souris est placé.
4.active est utilisé pour les connexions qui gagnent le focus (par exemple, en cas de clic).
Exemple :

ExampleSourceCode   
a:link{     
color:red
}     
a:visited{     
color:green
}     
a:hover{     
color:blue
}     
a:active{     
color:orange     
}

Remarque :

Bien que CSS vous permette de contourner le contrôle, utilisez des couleurs différentes pour indiquer les sites visités. La connexion est une bonne habitude car de nombreux utilisateurs l'attendent encore. Les pseudo-classes CSS (sauf le survol) ne sont pas couramment utilisées, et je crains qu'elles ne le soient pas aussi couramment dans le passé. Par conséquent, ce n’est plus aussi utile qu’avant. Mais si vous parvenez à recueillir l’opinion des utilisateurs, vous constaterez qu’il convient de l’utiliser.
Traditionnellement, le texte de connexion est bleu et les connexions visitées sont violettes. C'est peut-être la couleur la plus efficace et la plus utile. Cependant, avec le développement généralisé du CSS, cette couleur n'est plus courante et les utilisateurs ne supposent plus que les connexions doivent être bleues ou violettes.
Vous devriez également pouvoir utiliser la pseudo-classe hover sur d'autres éléments que les connexions. Malheureusement, InternetExplore ne prend pas en charge cela. C'est vraiment un énorme désagrément.

Pseudo-éléments
En fait, les pseudo-éléments en CSS n'existent pas en HTML, et ils sont généralement utilisés lors de traitements particuliers de certains éléments. Ce n'est qu'alors que le pseudo-élément couramment utilisé à utiliser :
:
:first-line peut spécifier le style de la première ligne de l'élément p
:
:first- lettre Vous pouvez spécifier le style du premier mot de l'élément p
::selection
Définir l'effet de surbrillance de l'utilisateur
:
:before dans l'élément Insérer le contenu avant
:
:aprèsInsérer le contenu après l'élément
Exemple HTML

<p>
    臣亮言，先帝創業未半<br>

    每天，天剛亮時，我母親便把我喊醒，叫我披衣坐起。我從不知道她醒來坐了多久了。   
</p>

première ligne et première lettre

/* 第一行樣式 */
p::first-line {   
    color: red;   
}   
/* 開頭第一個字樣式 */
p::first-letter {   
    font-size: 30px;   
}   
selection   
// 反白後的效果   
p::selection {   
    background: red;   
    color: #FFF;   
}   
// Firefox   
p::-moz-selection {   
    background: red;   
    color: #FFF;   
}

La différence entre pseudo-classe et pseudo-élément :
Tout d'abord, lisez w3c Définition des deux : 1. Les pseudo-classes CSS sont utilisées pour ajouter des effets spéciaux à certains sélecteurs.
2.Les pseudo-éléments CSS sont utilisés pour ajouter des effets spéciaux à certains sélecteurs.
Deux points peuvent être clarifiés. Le premier est que les deux sont liés au sélecteur, et le second est d'ajouter des effets "spéciaux". La particularité ici est que les deux décrivent des choses que les autres CSS ne peuvent pas décrire.
Type de pseudo-classe

Type de pseudo-élément

Différence

La pseudo-classe
est utilisée ici : premier-enfant et pseudo-élément :première-lettre pour comparaison.

p>i:first-child {color: red}   
<p>   
    <i>first</i>   
    <i>second</i>   
</p>

//Pseudo-classe : premier-enfant Ajouter du style au premier élément enfant Si on n'utilise pas de pseudo-classes, mais que vous voulez obtenir Pour l'effet ci-dessus, vous pouvez faire ceci :

.first-child {color: red}   
<p>   
    <i class="first-child">first</i>   
    <i>second</i>   
</p>

Autrement dit, nous ajoutons une classe au premier élément enfant, puis définissons le style de celui-ci classe. Voyons ensuite ajouter des styles à la première lettre

pour les éléments :

p:first-letter {color: red}   
<p>I am stephen lee.</p>

//pseudo-élément : première lettre Alors si on Que faut-il faire pour obtenir l'effet ci-dessus sans utiliser de pseudo-éléments ?

.first-letter {color: red}   
<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

Autrement dit, nous ajoutons une étendue à la première lettre, puis ajoutons un style à l'étendue.

La différence entre les deux est apparue. C'est-à-dire :

L'effet de pseudo-classe peut être obtenu en ajoutant une classe réelle, tandis que l'effet de pseudo-élément doit être obtenu en ajoutant un élément réel. C'est pourquoi l'un d'eux est appelé pseudo. -class et l'autre est C'est pourquoi on l'appelle un pseudo-élément.

总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes   
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

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!