Question

我试图让一个按钮组可以在其中放置多个按钮，或只是一个。

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

适用于有多个按钮的情况，但只有一个按钮时，按钮的四周都没有圆角。

Answer 1

问题是在:last-child之后调用:only-child。虽然这是一个“独生子女”而且＃34;它也是一个＆＃34;最后一个孩子＆＃34;所以: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

Answer 2

将“.btn-group .button：only-child”作为css文件中的最后一个类

在你的CSS中，“last”和“only”修改相同的属性并实现正确的layoyt，它们的指定顺序很重要。

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

按钮组边框半径问题

2 个答案: