[分享]css中3的倍数添加样式

CSS中有一个很强大的选择器，可以针对一个元素是某个数的倍数的情况下设置样式，这就是3的倍数选择器。如果您想在每三个元素上设置不同的样式，那么这个选择器非常有用。 / 每三个元素添加样式 / :nth...

CSS中有一个很强大的选择器，可以针对一个元素是某个数的倍数的情况下设置样式，这就是3的倍数选择器。如果您想在每三个元素上设置不同的样式，那么这个选择器非常有用。

 /* 每三个元素添加样式 */
    :nth-child(3n) {
        background-color: #ccc;
        color: #333;
        border: 1px solid #333;
    } 

在上面的代码中，我们使用了":nth-child()"伪类选择器并指定参数"3n"。这个参数的意思是匹配每三个子元素。

在这个选择器中，可以使用任何数字，而不仅仅是3。例如：

 /* 每五个元素添加样式 */
    :nth-child(5n) {
        background-color: #f4f4f4;
        color: #333;
        border: 1px solid #333;
    }

    /* 每两个元素添加样式 */
    :nth-child(2n) {
        background-color: #fff;
        color: #333;
        border: 1px solid #ccc;
    } 

用: nth-child() 偶数 /奇数选择器在交替的行和列上添加样式

 /*在偶数行/列选择器交替添加样式*/
    :nth-child(even) {
        background-color: #f2f2f2;
    }

    /*在奇数行/列上交替添加样式*/
    :nth-child(odd) {
        background-color: #f8f8f8;
    } 

这个选择器也可以使用"n+"和"n-"，用于匹配所有的子元素，如下所示：

 /* 匹配所有的子元素 */
    :nth-child(n) {
        background-color: #f8f8f8;
        color: #333;
        border: 1px solid #ccc;
    }

    /* 匹配除了前三个子元素之外的所有子元素 */
    :nth-child(n+4) {
        background-color: #e4e4e4;
        color: #333;
        border: 1px solid #333;
    }

    /* 匹配除了从第4个子元素开始的所有子元素之外的所有子元素 */
    :nth-child(-n+3) {
        background-color: #d0d0d0;
        color: #333;
        border: 1px solid #333;
    } 

以上就是CSS中3的倍数添加样式的一些常用方法。