伪元素和伪类

最新推荐文章于 2022-11-15 09:38:36 发布

running_ljy

最新推荐文章于 2022-11-15 09:38:36 发布

阅读量125

点赞数

分类专栏：前端 css

本文链接：https://blog.csdn.net/beiniao123/article/details/116900485

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

伪元素和伪类的根本区别：是否创造了新的元素。

伪元素/伪对象选择器：

伪元素可以当作一个假的元素，但不存在于dom树中，通常用来向元素添加小图标、清除浮动等

伪元素	作用
:first-letter	将特殊的样式添加到文本的首字母
:first-line	将特殊的样式添加到文本的首行
:before	在某元素之前插入某些内容
:after	在某元素之后插入某些内容

伪类选择器

伪类需要手动触发，触发时修改元素样式达到一个特殊的动态效果。

伪类	作用
:active	将样式添加到激活的元素
:focus	将样式添加到被选中的元素
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	将特殊的样式添加到未被访问的链接
:visited	将特殊的样式添加到被访问的链接
:first-child	将特殊的样式添加到元素的第一个子元素
:lang	允许创作者来定义指定的元素中使用的语言

区别

使用伪类:first-child和伪元素:first-letter来比较

<!DOCTYPE html>
<html>
    <head>
        <title>伪类/伪元素</title>
        <style>
            span:first-child {
                color: green;
            }
            .first-letter:first-letter {
                color: blue;
            }
            .first-letter1 {
            	color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            <span>I am lijy1</span>
            <span>I am lijy2</span>
        </div>
        <div class="first-letter">
            <span>I am lijy</span>
        </div>
         <div>
            <span class="first-letter1">I</span><span> am lijy</span>
        </div>
    </body>
</html>

输出结果
在这里插入图片描述
:first-child 添加样式到第一个子元素
:first-letter 添加样式到第一个字母
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果需要通过添加一个实际的元素才能达到，
实际上：css3中，明确规定了用一个冒号表示伪类,用两个冒号表示伪元素。
但因为兼容性问题，大部分还是统一使用单冒号。

附加：帮助记忆a标签的伪类的使用顺序
LOVE / HATE
link
visited
hover
active

running_ljy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素和伪类

伪元素和伪类的根本区别：是否创造了新的元素。伪元素/伪对象选择器：伪元素可以当作一个假的元素，但不存在于dom树中，通常用来向元素添加小图标、清除浮动等伪元素作用:first-letter将特殊的样式添加到文本的首字母:first-line将特殊的样式添加到文本的首行:before在某元素之前插入某些内容:after在某元素之后插入某些内容伪类选择器伪类需要手动触发，触发时修改元素样式达到一个特殊的动态效果。伪类作用:ac
复制链接

扫一扫

专栏目录