CSS3 序选择器运算公式

533 阅读1分钟
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
<p>我是段落9</p>

需求 : 选中上面标签的 偶数 标签 , 并且设置文字颜色为 红色

p:nth-child(2n){
    color:"red";
}

需求 : 选中上面标签的 奇数 标签 , 并且设置文字颜色为 蓝色

p:nth-child(2n + 1){
   color:"blue";
}

所以重点了解一下 nth-child(xn+y)

        :nth-child(xn+y)
           x : 用户自定义
           n : 查看选择了多少个元素, 从零开始依次递增元素 
           y : 用户自定义      (使用 xn 运算后的结果 + y 得出最后的结果)

       注意点 : 
           y 是可以被省略  :nth-child(xn)
        选择偶数 
       nth-child(2n)
       选择奇数
       nth-child(2n + 1)
       选择 3 的倍数
       nth-child(3n)