Css 使用第n个子项创建检查模式

我正在尝试使用第n个孩子制作一个棋盘格图案，但它没有按我预期的方式工作

在下面的示例中，我希望在

div

的两侧每隔

p

设置一次，以创建棋盘格图案。

p

设置为

width:50%

，并且

div

设置为

宽度：100%

我已经建立了一个演示：

HTML

---

有人能让我看看如何实现这一点吗？

不能有两个元素使用相同的id。我相信您希望切换到使用类

制作小提琴来演示

---

您需要将所有

p

元素放在一个

div

中，因为

n个子元素是基于父容器的。它使用以下代码：

HTML

<div id ='check'>
    <p>Odd</p>
    <p>Even</p>
    <p>Odd</p>
    <p>Even</p>
</div>

首先，您多次使用ID—ID应该是唯一的。除此之外，这条线
#check p:nth child（odd）
表示您希望为
#check
的每个odd
p
子级设置给定规则，这不是您想要的。你想让每一个单数
。检查
（我冒昧地将ID更改为一个类）。所以你应该把它们放在一个容器里，然后说：

#cont .check:nth-child(odd) {
    float:right;
}

这是小提琴：

如果您试图最小化CSS，可以尝试以下方法：

HTML:

它实际上是我CSS中的一个类，我修改了jfiddle以反映这一点
#checkerboard {
    width: 500px;
}

.check { 
    float:left; 
    width: 100px;
    height: 100px;
}

.check:nth-child(odd) {
    background: #DDD;
}

.check:nth-child(even) {
    background: #fff;
}

<div id ='check'>
    <p>Odd</p>
    <p>Even</p>
    <p>Odd</p>
    <p>Even</p>
</div>

#cont .check:nth-child(odd) {
    float:right;
}

<div class="checkerboard">
    <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>10</p>
</div>

.checkerboard p {
    float: left;
    width: 50%;
}

.checkerboard p:nth-child(4n-2), .checkerboard p:nth-child(4n-1) {
    background-color: #999;
}