css偽類與偽元素之間的比較分析

這篇文章跟大家分享關於css偽類和偽元素之間的比較分析，有興趣的小夥伴可以看一看本文內容。

偽類別

偽類別是選擇HTML文檔的某些部分的方式，原則上不是基於HTML文檔樹本身及其元素，也不是基於名稱，屬性或內容等特徵，而是基於其他抽象條件，如語言編碼或動態狀態一個元素。

原始偽類定義了隨著時間的推移或透過使用者介入進入和退出的元素的動態狀態。 CSS2在此概念上進行了擴展，以包括虛擬概念文件組件或文件樹的推斷部分，例如first-child。偽類的運作就好像將幻象類別加入各種元素中一樣。

限制：與偽元素不同，偽類可以出現在選擇器鏈中的任何位置。

範例偽類別程式碼：

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-elements用於處理元素的子部分。它們允許您在元素內容的一部分上設定樣式，超出文件中指定的內容。換句話說，它們允許定義邏輯元素，這些元素實際上不在文件元素樹中。邏輯元素允許在CSS選擇器中處理隱含的語義結構。

限制：偽元素只能套用於外部和文件層級上下文 - 而不是內嵌樣式。偽元素受限於它們可以出現在規則中的位置。它們可能只出現在選擇器鏈的末端（在選擇器的主題之後）。它們應該出現在選擇器中找到的任何類別或ID名稱之後。每個選擇器只能指定一個偽元素。若要在單一元素結構上處理多個偽元素，必須建立多個樣式選擇器/聲明語句。

偽元素可用於常見的印刷效果，例如初始上限和首字下沉。它們還可以處理來源文件中不存在的生成內容（使用“之前”和“之後”）下面添加了屬性和值的一些偽元素的範例樣式表。

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

以上是css偽類與偽元素之間的比較分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！