未在CSS和HTML中设置背景色

Question

我试图在代码中添加CSS按钮，但是按钮的背景颜色没有改变。

这是按钮的CSS代码：

.button {
  background-color: red;
  border: solid;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: 16px; 
  -moz-appearance: button;
  -webkit-appearance: button;

  text-decoration: none;
}

这是我当前拥有的HTML代码：

<div>
  <a href="names.html" class="button">Click here</a>
</div>

无论我将background-color设置为什么，按钮的背景均保持标准白色。这是当前按钮，但我想更改背景。

Answer 1

这正是您的代码。您如何看待它的工作原理。 我认为在您的项目中还有另一个CSS会覆盖您的背景颜色。 您可以使用开发人员工具（F12）检查CSS的哪一部分负责背景颜色。

chrome dev tools (inspecting html)
chrome dev tools (inspecting css)

.button {
  background-color: red;
  border: solid;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: 16px;
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
}

<div>
  <a href="names.html" class="button">Click here</a>
</div>

Answer 2

覆盖其他CSS：

    .button{
background: red! important
}

Answer 3

您的CSS正在被您未向我们展示的另一个类覆盖，或者您的浏览器正在缓存错误的结果。如果您使用的是Chrome：

1. 右键单击您的页面，然后单击“检查”
2. 在Inspector中，应该列出“网络”选项卡。点击它。
3. 在该标签内，应该有一个“禁用缓存”复选框。检查
4. 选中此选项刷新页面。

如果这不起作用，则可能在某个地方被覆盖。

Answer 4

是的。代码没有错。也许您不应该正确渲染CSS或为许多元素使用相同的类名。我也用您的代码尝试过。很好。

.button {
  background-color: blue;
  border: 2px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline;
  font-size: 16px; 
  -moz-appearance: button;
  -webkit-appearance: button;
  text-decoration: none;
}

<div>
  <a href="names.html" class="button">Click here</a>
</div>