css 子元素选择器

还在对first-child 、last-child、nth-child(n)、nth-last-child(n) 傻傻搞不清?仔细看看吧。

首先这几个选择器,都是要用  标签名称 加 冒号 才有效果的, 不可以用class的值 加冒号来使用, 例如   p:first-child{}    div:last-child{} 是有效的, 

对于如下代码:


        
                
123
                
456
        
                         
789
                
zzz
        

  .abc:first-child{} 这种写法是无效的冒号前面必须是 标签名称,

但是   .abc  div:first-child{}  这个是可以的, 满足冒号前面是 标签名,

.abc 只是限定了 仅仅对 .abc范围内的div起作用, 不加.abc就是对body内所有div有效

一,first-child

1.1  div:first-child{}   

表示对body内所有div而言,只要某个div相对于它的父元素来说是第一个子节点且是div即可被选中,代码如下:

    
		
	
	
		
123
456
789
zzz

运行效果如下:

css 子元素选择器_第1张图片

   、
123
   以及 
789
这3个div都会被选中,

对于abc这个div而言,它的父元素是body,而abc正好是body的第一个子元素,因此满足,

而xyz是body的第二个子元素则不满足;

对于123这个div而言,它的父元素是abc,而123正好是abc的第一个子元素,因此满足,

而456是abc的第二个子元素则不满足;

同理对于789这个div而言,它的父元素是xyz,而789正好是xyz的第一个子元素,因此满足,

而zzz是xyz的第二个子元素则不满足

1.2 ,如果改为   .abc  div:first-child{}

效果如下

css 子元素选择器_第2张图片

 因为已经限定 只作用于 .abc内的div,  而.abc 内部的第一个div就是123;

当有多级子元素,如何只选中第一级子元素?

比如123的内部还有两个div, 代码如下,怎样只选中123这一级,而不选中123内部的div?

    
		
	
	
		
123
123的内部1
123的内部2
456
789
zzz

应使用   .abc > div:first-child {} , 重点就是这个大于号,大于号表示只选下一级,而不选下一级中的子集

1.3 如果第一个元素不是div元素呢?

比如在abc的上面再加一个p标签,如下:

    
		
	
	
		

我是body的第一个元素,但我不是div

123
456
789
zzz

效果如下:

css 子元素选择器_第3张图片

由于body的第一个元素是p而不是div,因此abc这个div并未被选中,只选中了123和789,因为他们相对于各自的父元素来说是第一个子元素而且标签名是div

二,last-child

2.1  div:last-child{} 

表示对body内所有div而言, 只要某个div相对于它的父元素来说是最后一个子元素且是div即可被选中。

    
		
	
	
		
123
456
789
zzz

效果如下: 

css 子元素选择器_第4张图片

456是abc的最后一个子元素且标签名是div, xyz是body的最后一个子元素且标签名是div,zzz是xyz的最后一个子元素且标签名是div

2.2,  .abc  div:last-child{}

css 子元素选择器_第5张图片

只作用于abc内部;

三,nth-child(n)  和  nth-last-child(n) 

是为了弥补 firtst-child  和  last-child 的局限性,因为他们只能针对第一个元素 和 最后一个元素,如果我想针对第二个元素怎么办?针对第三个元素怎么办?针对第四个元素怎么办.......

所以搞出了这个nth-child(n)  和 nth-last-child(n),

nth-child(n)表示从前往后数,第n个元素;

nth-last-child(n) 表示从后往前数,第n个元素;

①  n 可以写成一个数字, 如

div:nth-child(1) {} 表示从前往后数的第一个子元素, 也就等同于  div:first-child{}

div:nth-child(2) {} 表示从前往后数的第二个子元素,

div:nth-last-child(2){} 表示从后往前数的第二个元素;

② n 可以写成 odd  或者  even

odd 是奇数 ,even是偶数

div:nth-first(odd){}  表示从前往后数,顺序排在基数位上的元素, 即第1,3,5,7,9...... 的元素;

div:nth-first(even) {} 表示从前往后数,顺序排在偶数位上的元素, 即第2,4,6,8,10...... 的元素;

 div:nth-last-child(even)()表示从后往前数,顺序排在偶数位上的元素,;

③ n可以写成    2n,  3n , 2n+1  这种形式:

div:nth-child(2n) {} 表示从前往后数, 2的倍数的元素,即第2,4,6,8,10...... 的元素;

div:nth-child(3n) {} 表示从前往后数, 3的倍数的元素,即第3,6,9,12 ...... 的元素, 比如写九宫格时,每行3个元素, 给每个元素设置一个margin-right, 但是第3列的元素要消除margin-right, 就可以针对3的倍数进行选中;

div:nth-last-child(3n) {} 表示从前往后数, 3的倍数的元素;

你可能感兴趣的:(前端,css,html,html5)