今天在看bootstrap教程的时候,发现教程上提到了一个知识点是之前没有注意过的,那便是nth-of-type和nth-child。这两个都是css3中的属性。
一开始教程上用了nth-child属性,后来又改成了nth-of-type,至于为什么改了吗,教程没有细说。小编我翻了相关资料,现将这两个属性的概念与区别总结如下。
nth-of-child:
它的属性就是按照所有类型标签的所谓整体队列进行排序筛选,也就是说不论你是h1,span还是p标签,使用这个属性你要遵循在DOM树中的顺序来进行操作。详情请看下文:
<style>
p:nth-child(2),p:nth-child(7){
color:red;
}
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>
效果如下
nth-of-type:
下面我们再来深入探讨下nth-of-type和它与nth-child的区别。
简单来说nth-of-type会忽略其它标签的顺序而安装标签自身种类的顺序进行筛选,也就是选择的参照点并不是DOM数,而是自身。下面我们结合两个具体的例子来了解下。
<style>
p:nth-of-type(1),p:nth-of-type(3){
color:red;
}
</style>
<h1>标题</h1>
<p>这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
<p>这是锻若</p>
效果如下:
这个也不难理解就是按照类型来计算,碰到一个同类型就加1,那你肯定会说既然如此那有什么好说的,关键如果像下面这样呢,如下:
.item:nth-of-type{color:red}
这种情况又是怎么个案类型法?所以今天主要是探讨这个问题。
<style>
.item:nth-of-type(3){
color:red;
}
</style>
<h1>标题</h1>
<p class="item">这是锻若</p>
<p>这是锻若</p>
<span>这是span</span>
<span class="item">这是span</span>
<span class="item">这是span</span>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>
<p class="item">这是锻若</p>
效果如下: