某些样式在CSS上不起作用，因此我必须在HTML中添加它们

Question

已经用HTML创建了一个按钮，然后通过CSS在其上添加了一些样式以及一些边框效果和其他样式，但是当我尝试更改背景色或文本的颜色时，它没有用，我不得不这样做通过在HTML文件上添加一些样式。有谁知道为什么背景和颜色无法更改，而边框等其他效果却起作用？

.button1 {
  float: none;
  height:20px;
  width:50px;
  background-color:blue;
  color:black;
  border-style: outset;
}

<hr>
<div class="button1">
  <button type="button" style="height:70px; width:230px; color:red; background-color: yellow">Click Here</button>
</div>

按钮

Answer 1

在您的代码中，将测试的颜色设置为红色。因为它是HTML行中的“内联”，它将覆盖所有CSS

<button type="button" style="height:70px; width:230px; color:red; background-color: yellow">Click Here</button>

如果删除内联颜色：红色，现在可以从CSS投射颜色。这也是为什么某些效果有效而其他效果无效的原因-它们不是内联预定义的，仅在您的CSS类中提供。

简而言之，转换顺序为内联> CSS

Answer 2

定位按钮并为其设置样式。

//one out of many solutions: you can give the button an id
<button id="whatever">click here</button>

//then style it using the id

#whatever {
   background-color: yellow;
   color: red;
}