first-of-type和nth-of-type都是CSS3新增的伪类选择器,今天的问题是从一个自己以前理解不透的问题开始的
代码1
<!DOCTYPE html>
<html>
<head>
<style>
.wrap .test1:nth-of-type(1)
{
background:#ff0000;
}
</style>
</head>
<body>
<div class="wrap">
<p >第一个段落。</p>
<p class="test1">第二个段落。</p>
<p class="test1">第三个段落。</p>
<p class="test1">第四个段落。</p>
</div>
</body>
</html>
我认为这段代码第二个段落，背景会变为红色，但是结果确没有变红。展现效果如下
刚开始错误的认为:first-of-type会根据 :前面的条件进行分类，但是first-of-type还是nth-of-type还是last-of-type都是根据元素进行分类的，也就是这段代码分完类之后要求第一个子元素的并且有类为.test1。。这两个条件。。这个伪类才可以生效。如果想让第二个段落可以标红可以将第一个p元素换成div, 伪类会对div分一类，对p元素分一类，第二个段落的p元素就变成了分类里的第一个。
当然也可以将.wrap .test1:nth-of-type(1)改为.wrap .test1:nth-of-type(2)这样也会生效。
所有这三个伪类第一步肯定是将父元素中的按元素类别分组，然后根据对应的筛选条件，选择对应的。：前面的只是筛选条件，不是分类标准，这是我一直理解错误的地方。
9241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
