首頁 >web前端 >css教學 >CSS中偽類和偽元素的區別

CSS中偽類和偽元素的區別

PHPz
PHPz轉載
2023-08-27 09:33:02997瀏覽

偽類別

偽類別表示選擇器的狀態,如:hover、:active、:last-child等。它們以一個冒號(:)開頭。

CSS偽類別的語法如下-

:pseudo-class{
   attribute: /*value*/
}

偽元素

同樣,偽元素用於選擇虛擬元素,如::after、::before、::first -line等。

這些以雙冒號(::)開頭。

CSS偽元素的語法如下 -

::pseudo-element{
   attribute: /*value*/
}

範例

以下範例說明了 CSS 偽類別和偽元素屬性。

 現場示範

<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
   padding: 3%;
   font-size:1.4em;
   color: tomato;
   background: bisque;
}
</style>
</head>
<body>
<p>You&#39;re somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html>

輸出

這將產生以下結果-

CSS中偽類和偽元素的區別

##範例

現場演示

<!DOCTYPE html>
<html>
<head>
<style>
p::after {
   content: " BOOM!";
   background: hotpink;
}
p:last-child {
   font-size: 1.4em;
   color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html>

輸出

這將產生以下結果-

CSS中偽類和偽元素的區別

以上是CSS中偽類和偽元素的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除
上一篇:定義視窗下一篇:定義視窗