CSS选择器怎么选择第几个元素
在前端设计时,会让元素中的某个或某几个显示不一样,在CSS中应该如何操作呢?这里以li为例举例说明:
给第1个li添加样式
li:first-child{样式代码}
给最后一个li添加样式
li:last-child{样式}
给第n个li添加样式
li:nth-child(N){样式代码}
或者
li:nth-of-type(N){样式代码}
给所有奇数个li添加样式(任选一个)
li:nth-child(odd){样式代码}
li:nth-child(2n+1){样式代码}
li:nth-of-type(odd){样式代码}
li:nth-of-type(2n+1){样式代码}
给所有偶数个li添加样式(任选一个)
li:nth-child(even){样式代码}
li:nth-child(2n+2){样式代码}
li:nth-of-type(even){样式代码}
li:nth-of-type(2n+2){样式代码}
从第2个li添加样式
li:nth-of-type(n+2){样式代码}
给倒数第n个li添加样式
li:nth-last-child(n){样式代码}...