css3第n个儿童问题_Css_Parent Child

css3第n个儿童问题

css

css3第n个儿童问题,css,parent-child,Css,Parent Child,我正在设计一个960像素宽的布局和无序列表。每个列表项的宽度为240px，因此有4个列表项水平排列在一行中。我在页面上有大约20行我希望其他所有列表项都有#ececec的背景，因此我的css应该是： ul li:nth-child(2n+2){ background-color:#ececec; } 这很有效。唯一的问题是，因为一行中有4个项目（偶数），下一行将是相同的，因此在一行中的每一个第一和第三个列表项目上呈现背景色。这不是我想要达到的效果。我希望背景颜色交替，创建一个网格效果

我正在设计一个960像素宽的布局和无序列表。每个列表项的宽度为240px，因此有4个列表项水平排列在一行中。我在页面上有大约20行

我希望其他所有列表项都有#ececec的背景，因此我的css应该是：

ul li:nth-child(2n+2){
    background-color:#ececec;
}

这很有效。唯一的问题是，因为一行中有4个项目（偶数），下一行将是相同的，因此在一行中的每一个第一和第三个列表项目上呈现背景色。这不是我想要达到的效果。我希望背景颜色交替，创建一个网格效果。这样做的正确css是什么（想想棋盘格）。谢谢

如果您想要棋盘，请使用：

ul li:nth-child(8n+1), ul li:nth-child(8n+3), ul li:nth-child(8n+6), ul li:nth-child(8n+8) {
    background-color:#ececec;
}

模式每两行重复一次，在您的示例中是每8个元素重复一次，因此选择器中需要8n。在这八种颜色中，你希望第0、第2、第5和第7种颜色是交替的

编辑：我尝试了这个HTML，在Firefox 3.5.9中得到了一个棋盘：

<html>
<head>
<style>
#container {
    width: 960px;
    border: 1px solid black;
}
span {
    border: 1px solid gray;
    display: block;
    width: 180px;
    float: left;
    padding: 10px;
    margin: 10px;
    background: blue;
}
span:nth-child(8n+1), span:nth-child(8n+3), span:nth-child(8n+6), span:nth-child(8n+8) {
    background: red;
}
</style>
<body>
<div id='container'>
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
    <span>Four</span>
    <span>Five</span>
    <span>Six</span>
    <span>Seven</span>
    <span>Eight</span>
    <span>Nine</span>
    <span>Ten</span>
    <span>Eleven</span>
    <span>Twelve</span>
    <span>Thirteen</span>
    <span>Fourteen</span>
    <span>Fifteen</span>
    <span>Sixteen</span>
    <span>Seventeen</span>
    <span>Eighteen</span>
</div>


#容器{
宽度：960px；
边框：1px纯黑；
}
跨度{
边框：1px纯色灰色；
显示：块；
宽度：180px；
浮动：左；
填充：10px；
利润率：10px；
背景：蓝色；
}
第n个孩子（8n+1），第n个孩子（8n+3），第n个孩子（8n+6），第n个孩子（8n+8）{
背景：红色；
}
一个
两个
三
四
五
六
七
八
九
十
十一
十二
十三
十四
十五
十六
十七
十八

与直觉相反，

第n个孩子是以1为基础的。似乎无法实现这一点。仍然加载完全相同的内容。我会再尝试几次。我已经尝试了两种建议，每种可能的组合都不起作用……有什么想法吗？@bobince，谢谢，我已经将数字改为1@JCHASE，我添加了示例代码。