HTML 按钮标签 css答案

【问题标题】：HTML Button tag cssHTML 按钮标签 css
【发布时间】：2021-12-07 18:44:44
【问题描述】：

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

我正在使用 sass。

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

非常感谢任何帮助。

【问题讨论】：

你在使用 sass 吗？这是寻找.buttonWrapper button button:first-child
@Phix 是的，我正在使用 sass。

标签： html css button

【解决方案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;
}

【讨论】：