HTML 按钮标签 css

Question

我正在尝试从左到右更改第一个按钮的背景颜色和位置，以便第二个按钮先显示。但是 :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;
  }
}

非常感谢任何帮助。

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

HTML 按钮标签 css

HTML Button tag css

html

css

button