HTML 按钮标签 css

Question

我试图从左到右更改第一个按钮的背景颜色和位置，以便首先显示第二个按钮。但:first-child选择器不起作用。

我正在使用萨斯。

HTML 结构-

<div class="buttonWrapper">
   <button class="reject" id="rcc-decline-button" aria-label="Decline cookies">Reject</button>
   <button class="accept" id="rcc-confirm-button" aria-label="Accept cookies">Accept Cookies</button>
</div>

我的代码：

.buttonWrapper button{
  border: none;
  border-radius: 4px;
  background-color:#000;
  button:first-child{
    background-color:#fff;
    float: right;
    margin-left: 2rem;
  }
}

非常感谢任何帮助。

Answer 1

如果您使用支持嵌套的预处理器（SASS、LESS 等），则应该&在嵌套内使用选择器：

.buttonWrapper button {
  border: none;
  border-radius: 4px;
  background-color: #000;

  &:first-child{
    background-color: #fff;
    float: right;
    margin-left: 2rem;
  }
}

CSS 本身不支持预处理器那样的嵌套。常规 CSS 需要更详细的语法（注意：上面的嵌套语法将编译为这个简单的 CSS）：

.buttonWrapper button {
  border: none;
  border-radius: 4px;
  background-color: #000;
}

.buttonWrapper button:first-child{
  background-color: #fff;
  float: right;
  margin-left: 2rem;
}