伪元素和伪类概念和区别总结

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

世态炎凉！！

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

阅读量2.7k

点赞数 1

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/ws9029/article/details/113863055

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细解读了CSS中的伪类（如:hover、:first-child等）和伪元素（如::first-letter、::before等），介绍了它们的区别，以及如何在实际开发中利用它们简化样式和选择器。

摘要由CSDN通过智能技术生成

1.什么是伪类?

伪娘:伪娘并不是女性，是男性，不过他们穿上女装，如果他们不说话，你可能就无法辨别,一样的道理，伪类，它不是真正类（在css中的类是class），为什么要用伪类呢，因为你在Dom树中你无法正常描述，比如一个按钮，正常的时候是灰色背景，鼠标悬浮的时候是蓝色背景，这种情况你在Dom树无法描述，如果用js实现的话你可能会写两个类，正常的时候定义一个类，鼠标悬浮的时候又定义一个类，这样通过js可以实现（通过hover事件添加和删除类）

<style>
    .btn {
        background-color: #aaa;
        width: 100px;
        height: 100px;
        list-style: none;
        border: none;
    }

    .hover {
        background-color: blue;
    }
</style>

<body>
    <button class="btn"></button>
</body>
<script>
    let btn = document.querySelector('.btn');
    btn.onmouseover = function () {
        btn.className = 'btn' + ' hover'
    };

    btn.onmouseout = function () {
        btn.className = 'btn';
    };
</script>

但是这样比较麻烦，伪类的话实现起来就比较简单！

<style>
    .btn{
        background-color: #aaa;
        width: 100px;
        height: 100px;
        list-style: none;
        border: none;
    }
    .btn:hover{
     background-color:blue;
    }
 </style>
 <body>
     <button class="btn"></button>
 </body>

.btn:hover就相当好像添加了一个hover类，其实并没有，所以叫伪类，再看下面例子：

<style>
    .btn{
        background-color: #aaa;
        width: 100px;
        height: 100px;
        list-style: none;
        border: none;
    }
    .btn:first-child{
     background-color:blue;
    }
 </style>
 <body>
     <button class="btn">btn1</button>
     <button class="btn">btn2</button>
 </body>

我们想找到子元素里面带有btn class的第一个儿子，常规的CSS选择器无法获取到，但可以通过 :first-child 伪类来获取到（好像加了个 first-child 类一样）

常用的伪类有：

选择器	含义
:active	选择正在被激活的元素（匹配指定状态）
:hover	选择被鼠标悬浮着的元素（匹配指定状态）
:link	选择未被访问的元素（匹配指定状态）
:visited	选择已被访问的元素（匹配指定状态）
:first-child	选择满足是其父元素的第一个子元素的元素
:lang(value)	选择带有指定 lang 属性的元素
:focus	选择拥有键盘输入焦点的元素
:enable	选择每个已启动的元素
:disable	选择每个已禁止的元素
:checked	选择每个被选中的元素
:target	选择当前的锚点元素
:first-of-type	选择满足是其父元素的第一个某类型子元素的元素
:last-of-type	选择满足是其父元素的最后一个某类型子元素的元素
:only-of-type	选择满足是其父元素的唯一一个某类型子元素的元素
:nth-of-type(n)	选择满足是其父元素的第n个某类型子元素的元素
:nth-last-of-type(n)	选择满足是其父元素的倒数第n个某类型的元素
:only-child	选择满足是其父元素的唯一一个子元素的元素
:last-child	选择满足是其父元素的最后一个元素的元素
:nth-child(n)	选择满足是其父元素的第n个子元素的元素
:nth-last-child(n)	选择满足是其父元素的倒数第n个子元素的元素
:empty	选择满足没有子元素的元素
:in-range	选择满足值在指定范围内的元素
:out-of-range	选择值不在指定范围内的元素
:invalid	选择满足值为无效值的元素
:valid	选择满足值为有效值的元素
:not(selector)	选择不满足selector的元素
:optional	选择为可选项的表单元素，即没有“required”属性
:read-only	选择有"readonly"的表单元素
:read-write	选择没有"readonly"的表单元素
:root	选择根元素

2.什么是伪元素?

伪元素确实创建了元素，但是这个元素没有在dom树中，简单的说，伪元素用于创建一些不在dom树的元素（虚拟元素），并为其添加样式！

<style>
   p::first-letter{
      color: crimson;
       font-size: 40px;
   }
 </style>
 <body>
     <p>css</p>
     <p>html</p>
 </body>

上面的代码相当于

<style>
   .first-letter{
      color: crimson;
       font-size: 40px;
   }
 </style>
 <body>
     <p><span class="first-letter">c</span>ss</p>
     <p><span class="first-letter">h</span>tml</p>
 </body>

常用的伪元素有：

选择器	含义
::first-letter	选择指定元素的第一个单词
::first-line	选择指定元素的第一行
::after	在指定元素的内容前面插入内容
::before	在指定元素的内容后面插入内容
::selection	选择指定元素中被用户选中的内容