css选择器:first-child和nth-child 采坑记

　　今天想用nth-child来给一个类似于树的目录（bootstrap-nav-tree  一个angularjs插件）设置不同的颜色，结构大致类似于

<ul>
    <li class="a">cat1</li>
    <li class="b">cat2</li>
    <li class="a">cat3</li>
    <li class="b">cat4</li>
    <li class="b">cat5</li>
    <li class="b">cat6</li>
</ul>

　　先需要获取class为a的项，然后设置标签颜色，于是代码想当然的书写如下：

li.a:nth-child(1){
  color:#22acff;  
}
li.a:nth-child(2){
  color:#00d5a7;  
}
.....

but....只有nth-child(1)有效果。如图所示：

这里需要知道两点：在伪类选择器中 XX:nth-child(n)

1.XX代表的不是父元素（这个坑我跳过去了）

2.n代表的不是第几个XX，而是XX的父元素下第几个子元素。（栽进去爬了半天才出来）

所以li.a:nth-child(2)不是指class为a的第二个标签，而是指ul下第二个子元素并且class为a的li标签！！

 

再举个栗子：

//HTML部分
<div>
    <h3>cat0</h3>

    <p>cat1</p>

    <p>cat2</p>

    <p>cat3</p>

    <p>cat4</p>
</div>

//CSS部分
div>p:nth-child(1){
     color: #00f;
}

效果：

赶紧出坑！！

转载于:https://www.cnblogs.com/mini-fan/p/6596364.html