数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告