p:hover {
/* 鼠标悬浮时的样式 */
color: red;
}
a:visited {
/* 已访问链接的样式 */
color: purple;
}
input:checked + label {
/* 选中状态下的样式 */
color: green;
}
p::before{
/* 前置内容 */
content: "[ ";
}
p::after{
/* 后置内容 */
content: " ]";
}伪类包括:hover、:active、:focus等，它们可以为元素赋予不同状态下的样式。而伪元素包括::before、::after、::first-letter、::first-line等，可以在元素的内容前、后或者首字母、首行插入特定的内容。
伪类、伪元素的使用可以提高页面的可读性和美观，可以在满足用户需求的同时提升网页的交互体验。