html - 将第一个和最后一个 child 的边界半径设置为零？

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

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