Maison > interface Web > tutoriel CSS > Pseudo-classes et pseudo-éléments en CSS et leurs différences

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

高洛峰
Libérer: 2017-03-13 17:40:06
original
1345 Les gens l'ont consulté

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     
}
Copier après la connexion


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>
Copier après la connexion


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;   
}
Copier après la connexion

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

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

Type de pseudo-élément


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

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>
Copier après la connexion


//Pseudo-classe : premier-enfant Ajouter du style au premier élément enfant Pseudo-classes et pseudo-éléments en CSS et leurs différences 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>
Copier après la connexion


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>
Copier après la connexion


Pseudo-classes et pseudo-éléments en CSS et leurs différences//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>
Copier après la connexion


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
Copier après la connexion


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

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal