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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

使用CSS为奇数div添加边框

2 个答案: