nth-child和nth-of-type

nth-clild和nth-of-type

结构伪类选择器权重是10

选中某个元素，该元素必须是某个父元素下的第n个子元素

选择第一个

li:first-nth-child{
    
}

选择第一最后一个

li:last-nth-child{
    
}

规律性间隔选择

/* 2n  3n+1  规律性间隔*/
li:nth-child(3n){
    
}

正方向范围(从第n个开始)

/* 选中从第6个开始的子元素 */
li:nth-child(n+6){
    
}

负方向范围(从开始一直到第n个)

/* 选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素 */
a:nth-child(-n+9){
    
}

中间范围选择

/* 选择第2个到底6个 */
.nav_box a:nth-child(-n+6):nth-child(n+2)

注意

/*css样式*/



/* 执行的时候 nth-child(1)之后回去看 前面div，这里第一个孩子不是div，就选不出来 */

/*先看第几个，再看孩子是什么标签*/
/* 从头开始，对元素里面所有的孩子进行排序（序号是固定的），先找到第n个孩子，再看标签是否匹配 */
/* 适用于里面标签都一样，或者选择的第几个的标签和html结构中的标签顺序一样才可以 */
/* nth-child(1)先看（）括号里的数字是选第几个，再看看是否匹配得上 */
/* 只有里面的孩子一样，都是一个标签才能用nth:child */
section div:nth-child(1){
    background-color:red;
}


/* 而nth-of-type(1) 是先看前面选的是什么标签（指定的元素），再看括号里的数字，是选第几个 */
/* 例如选div,就直接跳过前面的p，从div开始 */
/* nth-of-type(1)对父元素里面指定的元进行排序，先匹配标签，再去找所在标签下的第几个孩子 */





<section>
	<p>光头强</p>
	<div>熊大</div>	
	<div>熊二</div>
</section>