css3第n个子问题

发布于 2024-08-29 06:29:02 字数 339 浏览 3 评论 0原文

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

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

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

这有效。唯一的问题是，因为一行中有 4 个项目（偶数 #），所以下一行将是相同的，从而在一行中的每个第一个和第三个列表项目上渲染背景颜色。这不是我想要达到的效果。我希望背景颜色交替，创建类似网格的效果。这样做的正确CSS是什么（想想棋盘）。谢谢！

原文

I am designing a 960px wide layout with an unordered list. Each list item is 240px wide, so 4 list items fit horizontally in a row. I have about 20 rows on the page....

I want every other list item to have a background of #ececec, so my css would be:

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

This works. The only problem is because there are 4 items in a row (an even #), the next row would be identical, thus rendering background colors on every 1st and 3rd list items in a row. This is not the effect I am looking to achieve. I want the background colors to alternate, creating a grid-like effect. What is the correct css to do so (think a checker board). Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分開簡單 2024-09-05 06:29:02

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

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>

If you want a checkerboard, then use:

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;
}

The pattern repeats every two rows, which in your case is every 8 elements, so you need 8n in the selector. And of those eight, you want the 0th, 2nd, 5th and 7th to have the alternate color.

EDIT: I tried this HTML, and got a checkerboard in 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>

回复收藏 0 原文

~没有更多了~