前端CSS中伪类“nth-of-type(n)”的作用

在编程中的CSS文档中经常会遇到一些即要包裹在同一“div”中又要单独设置样式的标签

比如下面这种情况

在这里插入图片描述

在“hello”中有四个“p”标签,假如我只想给其中一个类设置样式怎么办呢?

先看一下没有设置样式前

在这里插入图片描述

然后在CSS中这样设置样式

“.hello
p{

   font-size:22px;

}”

我们给把它的字体大小设置为22个像素,来看看是什么效果。
在这里插入图片描述

应该可以看出来字体变大了,不过却是所有的“p”标签一起变大的。

接下来把上面的 CSS样式补充一点就可以达到我们想要的效果了。

“.hello
p:nth-of-type(1) {

   font-size:22px;

}”

在这里插入图片描述

来看效果

在这里插入图片描述

仔细一看就可以看出来第一个的字体比后面三个要大。

根据上面的案例应该看出来“nth-of-type(n)”的效果了吧,没错“nth-of-type(n)”的效果就是选择该类中的第n个相同的元素,并且不会影响其他的元素。

猜你喜欢

转载自blog.csdn.net/weixin_44540360/article/details/90256207