重新认识regardless示例
来，让他们先哥们这六大夜叉：
:first-child :last-child :nth-child :nth-last-child
:first-of-type :last-of-type :nth-of-type :nth-last-of-type
看了下面那些regardless示例，不晓得爸爸妈妈内心深处与否有跟我那样的设想：那些孪生兄妹究竟是啥？觉得差别并不大啊！
只不过那些是css3给他们追加的regardless示例特性，简而言之是来让他们优先选择原素并给原素增设式样用的。
但，这几兄妹很胖太相近，在工程项目时用的这时候，他们常常不慌不忙的优先选择，但结论常常和他们的市场预期相距相距无几。
上代码：
问：让第一个p标签中的字体变成红色，用regardless示例应该怎么写？
答：这还不简单：
结论瞬间打脸，式样并没有生效。
怎么办？解决问题的根本办法是从根源上铲除它，是这时候整明白这几个哥们了。
:first-child
从字面理解，优先选择父原素中的第一个子原素。
他们增设第一种式样：
这句话的意思是将main原素及main原素的后代原素，只要存在父子关系，父原素中的第一个子原素就要应用上相应的式样。这里与原素类型无关，只要你是父原素中的第一个子原素，那么你的字体就得变成红色。
main原素及其后代原素中究竟存在几对父子关系呢？
首先main原素下面存在四个子原素，那么第一个子原素肯定要应用式样；接着main下面的四个子原素当中第二个和第四个原素也有自己的子原素，这个这时候这两个原素中的第一个子原素也要应用式样，至此，就没有更深层次的父子关系了，那么最终的结论，他们看一下。
他们增设第二种式样：
这段代码是他们开篇引入的例子，他们分析一下，他们的本意是想通过这行代码，找到第一个p标签，并且将其字体颜色增设为红色，但他们发现，这段代码并没有生效，即原素没有被选中。
这里他们要晓得，:first-child这个regardless示例如果前面加了限定原素，比如说这里的p原素，这个这时候它的意思是要找到main原素下排序在第一位的子原素p，这里强调的是位置，即p原素必须要在其它子原素之前，如果p不在第一位，那么原素将不会被选中，式样也不会生效。
他们看一下，现在的p原素明显是在div原素之后，属于第二个子原素，所以无法被选中，式样当然不会应用到原素上。要想选中p原素应该如何写呢？那就要用到:nth-child()了。
:nth-child(n)
选中父原素当中的第n个子原素。
这里他们要注意，如果他们在这个示例前面加了限定标签，比如div标签，那么n一定要跟这个div原素的位置是一致的，比如，他们的n等于5，那么如果父原素下的第五个子原素不是div，那么这个这时候示例将无法找到目标原素。
了解了那些，开篇的那个问题就比较简单了。如果他们想要选中p原素，他们就要晓得当前p原素在父原素中位置，当前p原素排在第二位，这个这时候他们应该这样写：
巩固一下：如果我要选中main原素下第二个div原素并将字体增设成红色，应该如何写呢？大家可以试试。
:last-child :nth-last-child
这两个regardless示例只不过和下面的两个示例作用那样，唯一的差别是在优先选择原素的这时候，顺序是从后往前查找。
:first-of-type
直译的话是优先选择同类型的一组兄妹原素中的第一个原素，侧重点在于标签的类型，也是说在子原素中，多个相同类型的标签只会将式样应用到第一个原素上。
他们增设第一种式样：
他们分析一下这个示例所执行的内容，首先会在main标签下查找第一级原素，第一级原素里面会有两类标签，div和p，这个这时候这两类标签中的第一个原素分别会被应用上增设的式样。接着往下继续查找，p标签下还有子原素span并且只有这一类原素，所以这个span原素会被应用上css式样；然后往下找到了最后一个div原素，div原素也存在子原素，并且五个子原素中有三种类型，i、em和br类型标签，此时第一个i原素和第一个em原素会被应用上css式样；此时整个过程结束，最终效果如图。
他们增设第二种式样：
这段代码的意思是找到main原素下原素类型是div的后代原素，将div同类型的一组兄妹原素中的第一个原素应用上式样。此时main原素下有三个div子原素，并且它们属于兄妹原素，所以，第一个div将被应用上式样；接着往下搜寻，后代原素中不存在div原素，过程结束。
:nth-of-type(n)
优先选择同类型的一组兄妹原素中的第n个原素。
找到main原素下面同类型原素中的第二个原素并将字体颜色改为红色。
大致的过程可以这样理解：首先查找main原素下的第一级子原素，其中存在div和p两种类型，p原素只有一个，不满足条件，此时只有div这一类型中的第二个兄妹原素被选中。然后接着往下查找后代原素，发现最后一个div原素中还存在子原素，并且五个子原素中有三种类型，i、em和br类型标签，此时只有em原素满足条件，将第二个em原素应用css式样，至此整个过程结束。
:last-of-type :nth-last-of-type
这两个regardless示例和:first-of-type、:nth-of-type(n)两个示例作用那样，唯一的差别是在优先选择原素的这时候，顺序是从后往前查找。
最后总结一下，只不过:first-child :last-child :nth-child :nth-last-child这四个示例偏重于原素的位置，而:first-of-type :last-of-type :nth-of-type :nth-last-of-type则更偏重于原素类型。
通过以上内容及案例的讲解，希望能够帮助爸爸妈妈们对这七个regardless示例的含义及作用有更深入的理解，最后如果文章内容确实对您有益，还请点个赞鼓励一下，如果发现文章中存在错误，也请评论指出，我会及时修正。
