伪类与伪元素的区别

最新推荐文章于 2022-07-03 21:22:50 发布

哆来A梦没有口袋

最新推荐文章于 2022-07-03 21:22:50 发布

阅读量186

点赞数

分类专栏： web前端文章标签：伪类和伪元素常见伪类常见伪元素

本文链接：https://blog.csdn.net/qq_42625428/article/details/102481471

版权

web前端专栏收录该内容

68 篇文章 4 订阅

订阅专栏

什么是伪类？

伪类是一种临时的状态，在一定条件下进行触发，如:hover :active :visited.....，其实伪类是一种选择器的类型，伪类选择器分为了静态伪类和动态伪类

静态伪类选择器

静态伪类选择器只在a标签使用

:link 未访问时链接的状态

:visited 访问后链接的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 鼠标点击前蓝色 */
        a:link {
            color: blue;
            text-decoration: none;
        }
        /* 鼠标点击后红色 */
        a:visited {
            color: red;
        }
    </style>
</head>
<body>
    <a href="wwww.baidu.com">百度一下，你就知道</a>
</body>
</html>

点击前显示效果：

点击后显示效果：

动态伪类选择器

动态伪类选择器是所有标签都能使用的选择器，包括a标签哦。

:hover 鼠标移入时候的效果

:active 鼠标点击时的效果

:focus 鼠标聚焦时候效果

什么是伪元素？

伪元素也是一种选择器，但是伪元素::after ::before...伪元素是一个虚拟的节点，会在DOM树中出现

常见的伪元素

::after 在标签后添加内容

::before 在标签前添加内容

::placeholder 选中input框中的placeholer属性的值 (<input type="text" placeholder="sss">)

::first-letter 选中第一个字

::first-line 选中第一行

::selection 鼠标选中时的效果

常见的使用

利用after来进行清除浮动

::after {
    content: '';
    display: block;
    clear: none;
}

伪元素和伪类的区别?

伪元素和伪类都是一种css选择器，但是伪类是一种临时状态，一定条件下触发，而伪元素是一个dom节点，可以利用F12在浏览器中看到如下显示

哆来A梦没有口袋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪类与伪元素的区别

什么是伪类？伪类是一种临时的状态，在一定条件下进行触发，如:hover :active :visited.....，其实伪类是一种选择器的类型，伪类选择器分为了静态伪类和动态伪类静态伪类选择器静态伪类选择器只在a标签使用 :link 未访问时链接的状态 :visited 访问后链接的状态...
复制链接

扫一扫

专栏目录