CSS选择器---nth-child&nth-of-type

素颜马尾好姑娘i 2022-10-01 11:45 135阅读 0赞

## nth-child ##

:nth-child(number)      直接匹配第number个元素复制代码

:not(:first-child)      除第一个元素之外的子元素复制代码

:nth-child(n+2)         n+2表示从第二个开始复制代码

:nth-last-child(n+2)    这样获取除最后一个div中所有的div；也可以用:not(:last-child) 复制代码

:nth-child(2n)     获取子元素中第2,4,6,8,... 的元素复制代码

:nth-child(3n)   获取子元素中第3,6,9,... 的元素复制代码

:nth-child(odd)       奇数匹配使用复制代码

:nth-child(even)        偶数匹配使用复制代码

上面的选择器可以直接在class之后，也可以在后面加span/p/div等类型后，如下：

/* analysis-res class下的除了第一个之外的元素 */
    .analysis-res:not(:first-child) {
        color: #5792b1;
        font-weight: bold;
    }
    
    /*  analysis-res class下span标签中除了第一个之外的元素 */
    .analysis-res span:not(:first-child) {
        color: #5792b1;
        font-weight: bold;
    }
    复制代码

## nth-of-type ##

nth-of-type要是不研究一下还真容易理

解错，它说的是按照类型来选择，看下面这个例子。

效果如下：
    复制代码

这个也不难理解就是按照类型来计算，碰到一个同类型就加1，直到遇到所设定的元素就添加相应样式：

.item:nth-of-type{color:red}复制代码

那么直接在class后面:nth-of-type呢？

效果如下：

### 总结 ###

*  nth-child  
    按照个数来算。
 *  nth-of-type  
    按照类型来计算，同类型不断加1，直达找到累计的第几个

转载于:https://juejin.im/post/5c91f7e85188257de7040c35