使用CSS为奇数div添加边框

Question

我有一个喜欢的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>

和CSS

.wrap { float:left; width:100%;}
.single_wrap { float:left; width:50%; padding:15px 0; border-bottom:1px solid #ccc;}
.single_div { float:left; width:100%; border-right:1px solid #ccc;}

现在我想要实现的是对每个奇数.single_div和border-bottom的边界 - 除了最后两个.single_wrap。 如何使用CSS实现这一目标。 我知道第n个选择器，但它不起作用。 因为我尝试过这样的事情

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

Answer 1

你应该首先检查你的标记，因为有未公开的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;  
}

示例小提琴： http ： //codepen.io/anon/pen/raMVgM

Answer 2

使用.single_wrap:nth-child(odd) .single_div选择器。 对于border-bottom使用:nth-child(1)和nth-child(2) 。

 .wrap { float: left; width: 100%; } .single_wrap { float: left; width: 50%; padding: 15px 0; } .single_div { float: left; width: 100%; } .single_wrap:nth-child(odd) .single_div { border-right: 1px solid #ccc; } .single_wrap:nth-child(1) .single_div, .single_wrap:nth-child(2) .single_div { border-bottom: 1px solid #ccc; } 

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