Html 将边框添加到奇数div'；s使用CSS

我有一个类似html的

<div class="wrap">
  <div class="single_wrap">
     <div class="single_div">
         <p>some text</p>
     </div
  </div>
  <div class="single_wrap">
     <div class="single_div">
         <p>some text</p>
     </div
  </div>
  <div class="single_wrap">
     <div class="single_div">
         <p>some text</p>
     </div
  </div>
  <div class="single_wrap">
     <div class="single_div">
         <p>some text</p>
     </div
  </div>
</div>

现在，我想实现的是每一个奇数的右边框。单div和边框底部，除了最后两个。单包装。 如何使用CSS实现这一点。我知道第N个选择器，但它不工作。当我试着这样做的时候

.single_wrap .single_div:nth-child(odd) { border-right:1px solid #ccc;}

---

您应该首先检查标记，因为有未关闭的

div

。然后，为了您在最新/现代浏览器上的目的，您可以这样做

/* right border on all odd single_div */
.single_wrap:nth-child(2n + 1) .single_div {
  border-right: 1px #000 solid;
}

/* bottom border on first n-2 single_wrap */
.single_wrap:nth-last-child(n + 3) {
  border-bottom: 1px #000 solid;  
}

---

小提琴示例：

使用

。单键环绕：第n个子项（奇数）。单键div

选择器。对于

边框底部

使用

：第n个子项（1）

和

第n个子项（2）

.wrap{
浮动：左；
宽度：100%；
}
.单面包装{
浮动：左；
宽度：50%；
填充：15px0；
}
.单间{
浮动：左；
宽度：100%；
}
.single\u wrap:第n个子项（奇数）。single\u div{
右边框：1px实心#ccc；
}
.single\u wrap:n个子项（1）。single\u div。single\u wrap:n个子项（2）。single\u div{
边框底部：1px实心#ccc；
}

一些文本

一些文本

一些文本

一些文本

您正在测试的浏览器是什么？请更正您的代码。对css声明使用{}而不是（）。这是期望的结果吗？你很抱歉@CatalinLungu。我打错了。这不是一个理想的边界底部解决方案：如果他添加新的块呢？内容是动态的，所以边界底部解决方案不会像@Fabrizio Calderan所说的那样起作用

/* right border on all odd single_div */
.single_wrap:nth-child(2n + 1) .single_div {
  border-right: 1px #000 solid;
}

/* bottom border on first n-2 single_wrap */
.single_wrap:nth-last-child(n + 3) {
  border-bottom: 1px #000 solid;  
}