将第一个和最后一个孩子的边界半径设置为零？

Question

我有一个project test page here，并且为了测试23（u-button-group），我试图将u-button-group（只有2个）中第一项和最后一项的边界半径设置为0px，目前无法正常运作。这是u-button-group的CSS，我还将包括屏幕截图：

  .u-button-group {
    display: inline-flex;
    flex-direction: row;
  }

  .u-button-group: first-child {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }

  .u-button-group: last-child {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
  }

u-button-group实用程序的源代码也可以是found here。有想法吗？

Answer 1

您正在寻找.u-button-group button:first-child {...}

“孩子”一词可能有点误导。由于在上面的示例中描述了按钮的属性，因此它引用了第一个按钮。如果在.u-button-group上使用它，则表示这是第一个组。

Answer 2

我认为您正在寻找这个。

.u-button-group .bs-Button--primary:first-child

在您的示例中，您不够具体，无法选择按钮。在您的示例中，孩子是指u-button-group而不是按钮本身。

MDN specs在说什么。

  

：first-child CSS伪类表示一组同级元素中的第一个元素。

这是一个选择按钮的有效示例。

.u-button-group {
  display: inline-flex;
  flex-direction: row;
}

.u-button-group .bs-Button--primary {
  border-radius: 10px;
  padding: 5px;
}

.u-button-group .bs-Button--primary:first-child {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.u-button-group .bs-Button--primary:last-child {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

<div class="TestRender">
  <div class="u-button-group">
    <button class="bs-Button--primary">first block button</button>
    <button class="bs-Button--primary">lastblock button</button>
  </div>
</div>