Question

我有一个特定方式的提交按钮，但我希望在不同的页面上显示不同的提交按钮。我正在努力弄清楚如何更改第二个提交按钮的样式。

对于第一个按钮，html看起来像这样：

<button type="submit">Submit</button>

CSS看起来像这样：

input[type="submit"],
button[type="submit"] {
  height: 50px;
  line-height: 48px;
  border: 2px solid #47b475;
  background: #47b475;
  color: #fff;
  width: 100%;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;

}

我尝试过创建类似的东西：

.button2 {

/*bunch of code

}

但我尝试了：

<button type="submit" class="button2">Submit</button>

这不起作用所以我显然错过了一些东西。请帮忙！

由于

Answer 1

您刚刚遇到 CSS选择器特异性问题 您需要在课程input[type="submit"]之前重复.button2以使其更具体，因此覆盖任何较低的特异性风格

input[type="submit"],
button[type="submit"] {
  height: 50px;
  line-height: 48px;
  background: #47b475;
  border: 2px solid #47b475;
  color: #fff;
  width: 100%;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}


input[type="submit"].button2,
button[type="submit"].button2{

  background: #1CEA6E;
  border: 2px solid #1CEA6E;

}

<button type="submit">Submit</button>
<button type="submit" class="button2">Submit</button>

样式以不同方式提交按钮

1 个答案: