CSS-选择器10-first-child、last-child、nth-child 和 nth-last-child

CSS选择器-系列文章

1、CSS选择器说明

选择器	例子	例子描述	CSS
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p元素。	2
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 p 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 p 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3

特别注意，选择的是选中对象在父元素中的第一个元素

2、基础效果演示

源代码

    
    
    


    
1
    
2
    
3
    
4
    
5

运行效果：

image.png

3、奇偶选择器

源代码

    
    
    


    
1
    
2
    
3
    
4
    
5

运行效果。

image.png

4、有规律的选择器

假如我们想实现边框显示，元素的计数是3n+1红、3n+2 绿 、3n +3 蓝色，应该如何实现呢？
源代码：

    
    
    


    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9

运行效果：

image.png

5、意料之外的显示

源代码：

    
    
    


    
p1

div1

p2

div2

p3