CSS 中伪类和伪元素的区别

cssweb developmentfront end technology更新于 2024/8/27 15:40:17

伪类

伪类表示选择器的状态，例如 :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>

输出

这将产生以下结果 −

示例

<!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>