学习记录307@CSS3中nth-child()不起作用的问题

先看下面的例子：

	
		"utf-8">
		
		
	
	
		

			"#">链接也算位置
			
1
			
2
			
3
		
	

最开始我以为会是第二个p变为红色，但是结果是第一个p，为什么呢？
因为我对nth-child()的定义没有理解清楚，我理解的是直接在父级div中选择第二个p，但是这样理解并不正确。
准确的定义是：nth-child()选择器选取属于其父元素的不限类型的第 n 个子元素的所有元素。
但是这个准确的官方定义也不好理解，我目前的理解是，选择冒号前的这个元素的同级元素的第几个元素，比如上面的例子就是选择与p元素同级的元素，这里就是a和另外两个p，这个级别整体有一个a和三个p，然后选择第二个元素，就是数字1。注意优先限定的是冒号前面的那个元素，再找这个元素的同级元素。
按照上面的理解，再看一个例子：

	
		"utf-8">
		
		
	
	
		
"div1">
			"#">链接也算位置
			
1
			
2
			
3
			
"div2">
				
4
				
5
			
		
	

按照上面的理解，选择div1下的与p同级的第二个元素，因为div1下的div2下也有p，因此分为了两个部分，分别选取这两个部分的第二个元素，这样1和5都会被标红。
如果想要只选择div1下面的p的同级元素呢？使用子选择器，>表示只选择亲儿子元素，而不管孙子元素。

.div1>p:nth-child(2){
     
				color: red;
			}

扩展