Question

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

我希望每个其他列表项都有#ececec的背景，所以我的css将是：

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

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

Answer 1

如果您需要棋盘格，请使用：

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>

css3第n个孩子的问题

1 个答案: