html - 合并DIV之间的边界

Question

给你:

<div id="weapons_main">
  <div class="col1">.</div>
  <div class="col1">.</div>
  <div class="clear"></div>
  <div>1</div>
  <div>2</div>
</div>

CSS:

#weapons_main{
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: thin solid #869BBF;
    border-collapse: collapse;
    margin: 0 auto;
    width: 80%;
}

#weapons_main div{
    background-color: #EFF0FB;
    border: solid 5px red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main .col1{
    width: 50%;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}

http://jsfiddle.net/T3v9u/

问题立即可见:红线比应有的粗，因为浏览器汇总了它们而不是合并它们。如何躲避？

Answer 1

您可以使用 :last-child 和相邻的兄弟选择器 (+)

#weapons_main div:last-child {
    border-top: 0;
}


#weapons_main .col1 + .col1 {
    border-left: 0;
}

DEMO

对于更高级的示例，您可以使用 :nth-child

#weapons_main .col1:nth-child(2n) {
    border-left: 0;
}

DEMO