伪类和伪元素的区别及使用场景

2024-05-30 00:37:42

1. 伪类和伪元素的区别

1.1 作用不同

伪类是一种状态，可以看看做是选择器。比如鼠标经过伪类 :hover , 比如结构伪类 li:nth-child，一个冒号。

伪元素是元素，简单来说，就是用css 模拟出来了一个盒子。

1.2 权重不相同

伪类是 10 （类、属性选择器 [type=submit]）

伪元素是 1 (标签选择器 )

1.3 使用场景不同

比如:鼠标经过盒子，盒子里面的样式会有变化，则需要使用伪类

如果想在盒子内部插入一个小盒子，此时可以使用伪元素。

2. 伪元素最常见的使用场景

做一些装饰类的小图标的时候，可以使用伪元素。比如:

注意：不要迷恋伪元素，非常重要的信息，不要使用伪元素。比如产品标题，产品介绍等。它主要用来装饰作用的。

3. 结构伪类 nth-child

根据结构来选择标签，选儿子（亲儿子）选择第几个，比如选择第4、8个元素等，这是结构伪类的使用场景。

但是，结构伪类nth-child使用，是有具体要求的，如果非要按按照顺序来使用，必须是亲兄弟。比如：这个排序比较简单

<ul><li>手机</li><li>电脑</li><li>榴莲</li>
</ul>选择第3个liul li:nth-child(3) {color: red;
}但是，如果是这样，则排序就不对：<div class="box"><a href="#">链接</a><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p>
</div>

nth-child() 选孩子的时候，不一定是同类的。依次来排号。

进行选择的时候，先执行 nth-child(n) 先按照序号找到这个元素，然后再看前面的标签选择器能否匹配。

.box p:nth-child(5) {color: red;
}

拓展：

可以使用另外一个选择器 li:nth-of-type() 选择的时候可以分类, 必须是同一类

p:nth-of-type(1)

执行顺序：先看 p，再执行 nth-of-type 从1开始排号。

伪类和伪元素的区别及使用场景相关推荐

详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...
【响应式Web前端设计】CSS3伪类与伪元素的区别
首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 CSS中伪类与伪元素的概念是很容易混淆的,今天就来谈谈伪类与伪元素之间的区别伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效 ...
CSS之 :before :after的用法，伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
什么是伪类和伪元素？伪类和伪元素的区别的区别详解
1.伪类用来添加一些选择器的特殊效果. 2.伪元素伪元素是用来添加一些选择器的特殊效果. 3.区别伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一 ...
css伪类和伪元素的特性和区别
伪元素是真的有元素前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息: 伪元素本质上是创建了一个有内容的虚拟容器: CS ...

最新文章

热门文章