Vergleichende Analyse zwischen CSS-Pseudoklassen und Pseudoelementen

In diesem Artikel wird die vergleichende Analyse zwischen CSS-Pseudoklassen und Pseudoelementen mit Ihnen geteilt. Interessierte Freunde können sich den Inhalt dieses Artikels ansehen.

Pseudoklassen

Pseudoklassen sind eine Möglichkeit, bestimmte Teile eines HTML-Dokuments auszuwählen, die im Prinzip nicht darauf basieren Der HTML-Dokumentbaum selbst und seine Elemente basieren nicht auf Merkmalen wie Name, Attributen oder Inhalt, sondern auf anderen abstrakten Bedingungen, beispielsweise der Sprachkodierung oder dem dynamischen Zustand eines Elements.

Die primitive Pseudoklasse definiert den dynamischen Zustand eines Elements, das im Laufe der Zeit oder durch Benutzereingriff ein- und austritt. CSS2 erweiterte dieses Konzept um virtuelle Konzepte, Dokumentkomponenten oder abgeleitete Teile des Dokumentbaums, wie z. B. das erste untergeordnete Element. Pseudoklassen funktionieren genauso wie das Hinzufügen von Illusionsklassen zu verschiedenen Elementen.

Einschränkungen: Im Gegensatz zu Pseudoelementen können Pseudoklassen überall in der Selektorkette erscheinen.

Beispielcode für eine Pseudoklasse:

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 */
}

Pseudoelemente

Pseudoelemente werden verwendet, um Unterteile von Elementen zu verarbeiten. Sie ermöglichen es Ihnen, Stile für einen Teil des Inhalts eines Elements festzulegen, der über die im Dokument angegebenen Bereiche hinausgeht. Mit anderen Worten: Sie ermöglichen die Definition logischer Elemente, die sich tatsächlich nicht im Dokumentelementbaum befinden. Logische Elemente ermöglichen die Handhabung impliziter semantischer Strukturen in CSS-Selektoren.

Einschränkung: Pseudoelemente können nur auf externe Kontexte und Kontexte auf Dokumentebene angewendet werden – nicht auf Inline-Stile. Pseudoelemente sind auf die Stellen beschränkt, an denen sie in einer Regel vorkommen können. Sie dürfen nur am Ende der Selektorkette (nach dem Betreff des Selektors) erscheinen. Sie sollten nach jedem im Selektor gefundenen Klassen- oder ID-Namen erscheinen. Pro Selektor kann nur ein Pseudoelement angegeben werden. Um mehrere Pseudoelemente in einer einzelnen Elementstruktur zu verarbeiten, müssen mehrere Stilselektoren/Deklarationsanweisungen erstellt werden.

Pseudoelemente können für gängige typografische Effekte wie Anfangsbuchstaben und Initialen verwendet werden. Sie können auch generierte Inhalte verarbeiten, die im Quelldokument nicht vorhanden sind (mithilfe von „before“ und „after“). Nachfolgend finden Sie ein Beispiel-Stylesheet mit einigen Pseudoelementen mit hinzugefügten Attributen und Werten.

/* 以下规则选择标题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;
}

Das obige ist der detaillierte Inhalt vonVergleichende Analyse zwischen CSS-Pseudoklassen und Pseudoelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!