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

CSS中偽類和偽元素的區別

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

偽類別

偽類別表示選擇器的狀態，如: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中文網其他相關文章！

css 选择器伪类伪元素

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

看更多