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基于父容器。 Here is a modified fiddle.。它使用此代码：

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

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

创建了一个演示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

如果您尝试最小化CSS，可以尝试这样的事情：

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/

使用nth-child创建检查模式

4 个答案: