資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會科學
時尚研究
法律研究CSS 偽類與偽元素的區別
偽類
偽類表示選擇器的狀態，如 :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'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>Demo Text</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>
更新時間：01-11-2023
3K+ 瀏覽量
廣告