css - 使用 nth-child 创建检查模式

Question

我正在尝试使用 制作棋盘格图案nth-child，但它没有按我预期的方式工作。

p在下面的示例中，我想在 的相对侧设置每隔一个div以创建棋盘格图案。p设置为width:50%;，设置div为width:100%。

我设置了一个jsfiddle来演示：

HTML

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

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

CSS

#check { 
  float:left; 
  width: 100%;
}
#check p {  
  width: 50%;
  background: #DDD;
}

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

有人可以让我看看如何完成这项工作吗？

Answer 1

您需要将所有p元素放在一个 中div，因为nth-child它基于父容器。这是一个修改过的小提琴。. 它使用以下代码：

HTML

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

CSS

#check { 
    float:left; 
    width: 100%;
}
#check p {  
    width: 50%;
    background: #DDD;
    clear:both;
}

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

#check p:nth-child(even) {
    float:left
}

Answer 2

不能有 2 个元素使用相同的 id。我相信你想切换到使用类。

创建了一个小提琴来演示http://jsfiddle.net/wE6e4/

#checkerboard {
    width: 500px;
}

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

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

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

Answer 3

首先，您多次使用 ID - ID 应该是唯一的。除此之外，该行 #check p:nth-child(odd)意味着您要为 的每个奇数p孩子设置给定的规则#check，这不是您想要的。你想要做每一个奇怪的事情.check（我冒昧地将 ID 更改为一个类）。所以你应该把它们放在一个容器里，然后说：

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

这是小提琴：http:
//jsfiddle.net/Wbnks/

Answer 4

If you're trying to minimize your CSS, you can try something like this:

HTML:

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

CSS:

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

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

http://jsfiddle.net/L9ng7/5/