Analyse comparative entre les pseudo-classes CSS et les pseudo-éléments

Cet article partagera avec vous l'analyse comparative entre les pseudo-classes CSS et les pseudo-éléments. Les amis intéressés peuvent jeter un œil au contenu de cet article.

Pseudo-classes

Les pseudo-classes sont un moyen de sélectionner certaines parties d'un document HTML, en principe non basé sur l'arborescence du document HTML lui-même et ses éléments, non pas sur la base de caractéristiques telles que le nom, les attributs ou le contenu, mais sur d'autres conditions abstraites, telles que l'encodage du langage ou l'état dynamique d'un élément.

La pseudo-classe primitive définit l'état dynamique d'un élément qui entre et sort au fil du temps ou grâce à l'intervention de l'utilisateur. CSS2 a développé ce concept pour inclure des composants de document de concepts virtuels ou des parties déduites de l'arborescence du document, telles que le premier enfant. Les pseudo-classes fonctionnent de la même manière que l’ajout de classes d’illusion à divers éléments.

Limitations : Contrairement aux pseudo-éléments, les pseudo-classes peuvent apparaître n'importe où dans la chaîne de sélection.

Exemple de code de pseudo-classe :

a:link /* 选择未访问过的“a”元素*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* 字体颜色为黑 */
background-color : #99FF99; /* 设置为淡绿色*/
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* 这将选择任何已访问其目标的“a”元素。*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* 这将选择处于悬停状态的任何“a”元素。这是指针在元素的渲染区域内移动期间的状态。用户指定元素但不激活它。 */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* 这将选择当前具有焦点的任何“a”元素。焦点是元素接受键盘输入或其他形式的文本输入的状态。 */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /*这将选择处于激活状态的任何“a”元素。活动是指针激活期间的状态（例如：按下并释放鼠标）在元素的渲染区域内*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

Pseudo-éléments

les pseudo-éléments sont utilisés pour traiter des sous-parties d'éléments. Ils vous permettent de définir des styles sur une partie du contenu d'un élément au-delà de ce qui est spécifié dans le document. En d’autres termes, ils permettent de définir des éléments logiques qui ne sont pas réellement dans l’arborescence des éléments du document. Les éléments logiques permettent la gestion des structures sémantiques implicites dans les sélecteurs CSS.

Limitation : les pseudo-éléments ne peuvent être appliqués qu'à des contextes externes et au niveau du document - pas aux styles en ligne. Les pseudo-éléments sont limités à l'endroit où ils peuvent apparaître dans une règle. Ils ne peuvent apparaître qu'à la fin de la chaîne de sélection (après le sujet du sélecteur). Ils doivent apparaître après tout nom de classe ou d’ID trouvé dans le sélecteur. Un seul pseudo-élément peut être spécifié par sélecteur. Pour gérer plusieurs pseudo-éléments sur une structure d'élément unique, plusieurs sélecteurs de style/instructions de déclaration doivent être créés.

Les pseudo-éléments peuvent être utilisés pour les effets typographiques courants tels que les majuscules initiales et les lettrines. Ils peuvent également gérer le contenu généré qui n'existe pas dans le document source (en utilisant "avant" et "après"). Vous trouverez ci-dessous un exemple de feuille de style avec quelques pseudo-éléments avec des attributs et des valeurs ajoutés.

/* 以下规则选择标题1的第一个字母，并将字体设置为2em，草书，绿色背景。第一个字母选择块级元素的第一个呈现的字母/字符。 */
h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}
/* 以下规则选择段落中第一个显示的行并使其变为粗体。第一行选择块级元素的输出设备上的第一个渲染行。 */
p:first-line {
font-weight : bold;
}
/* 以下规则选择在blockquote之前放置的任何内容，并在带有绿色背景的粗体小型大写字母中插入短语“当天的引用：”。 */
blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}
/* 以下规则选择放在“q”元素之前的任何内容并插入智能打开引号。 */
q:before {
content : open-quote;
}
/* 以下规则选择放在“q”元素后面的任何内容并插入智能关闭引用。*/
q:after{
content : close-quote;
}

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!