按钮组边框半径问题

Question

我想创建一个按钮组，既可以放置多个按钮，也可以只放置一个按钮。

这里有一个示例：http://jsfiddle.net/jssq20gn/

以下是html代码：

<!--THIS IS HOW IT SHOULD WORK FOR WHEN THERE IS THREE BUTTONS-->
<article>
   <div class='btn-group'>
       <a class='button'>Test</a>
       <a class='button'>Test</a>
       <a class='button'>Test</a>
   </div>
</article>
<!--THIS WORKS TOO-->
<article>
   <div class='btn-group'>
       <a class='button'>Test</a>
       <a class='button'>Test</a>
   </div>
</article>
<!--THIS DOESN'T WORK, should have rounded borders-->
<article>
   <div class='btn-group'>
       <a class='button'>Test</a>
   </div>
</article>

如果有多个按钮，这将起作用，但是当只有一个按钮时，该按钮并没有在所有边角上都有圆角。

- Muhambi

Answer 1

问题是 :last-child 在 :only-child 之后被调用。虽然这是一个“only-child”，但它也是一个“last-child”，因此 :last-child 选择器在 CSS 层次结构中覆盖了 :only-child。请将 :only-child 移至 :last-child 之下：

.btn-group .button:last-child {
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
}

.btn-group .button:only-child {
  border-radius: 6px;
  margin-left: 0;
}

FIDDLE

- jmore009

Answer 2

将“.btn-group .button:only-child”作为您的CSS文件中的最后一个类。

在您的CSS中，“last”和“only”都修改相同的属性，为实现正确的布局，它们指定的顺序很重要。

http://jsfiddle.net/jssq20gn/1/

.btn-group .button {
  border-radius: 0;
}
.btn-group .button:first-child {
    border-radius: 6px 0 0 6px;
}
.btn-group .button:last-child {
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}
.button {
    padding: 10px;
    background: teal;
    border: 1px Black solid;
    color: #FFF;
}
article {
    padding: 10px;
    margin-bottom: 50px;
}
.btn-group .button:only-child {
    border-radius: 6px;
    margin-left: 0;
}

- marcinn