CSS nth选择器的功能和语法说明

CSS nth选择器的功能和语法说明 第一张

CSS nth选择器

CSS nth选择器是CSS3中新增的一种选择器,它可以选择满足某种规则的元素。它可以用来实现一些精细的样式控制,比如给奇数行和偶数行添加不同的样式、给每隔几个元素添加样式等等。

语法

CSS nth选择器的语法为:

selector:nth-child(an+b)

其中,selector表示要被选中的元素,an表示一个自然数,b表示一个非负整数。

使用方法

使用CSS nth选择器可以实现一些精细的样式控制,下面列举几个常用的例子:

  • 给奇数行添加样式:
    tr:nth-child(2n+1){background-color: #eee;}
  • 给偶数行添加样式:
    tr:nth-child(2n){background-color: #ddd;}
  • 给每隔3个元素添加样式:
    li:nth-child(3n){background-color: #ccc;}
  • 给第4个元素添加样式:
    li:nth-child(4){background-color: #bbb;}
© 版权声明
THE END
分享