如何正确地将 CSS 应用于按钮元素？

Question

全部。 HTML 和 CSS 非常新，我在将 CSS 应用于某些按钮时遇到问题。这是代码：

HTML:

<div class="top-buttons">
        <button id="first-button">One</button>
        <button id="second-button">Two</button>
        <button id="third-button">Three</button>
        <button id="fourth-button">Four</button>
<div>

CSS

.button {
  display: inline-block;
  border: none;
  /* padding */
  text-align: center;
  text-decoration: none;
  /* font-size */
  margin: 15px 30px;
  cursor: pointer;
  color: #564946;
}

#first-button{
  border-radius: 20%;
}

我一直在玩弄，只能让 border-radius 工作； none 的其他属性有效，即使我将它从 .button 切换到 .top-buttons。有任何想法吗？在这一点上我唯一的想法是它可能是我正在使用的文本编辑器？我只是坚持使用 Atom，因为我之前安装过它。非常感谢您！

Answer 1

您的按钮包裹在 <button></button> 标签中，而您将样式应用到 .button class，因此如果您想要将全局样式应用到这些按钮，您应该使用以下将样式应用于按钮标签：

button {
  display: inline-block;
  border: none;
  /* padding */
  text-align: center;
  text-decoration: none;
  /* font-size */
  margin: 15px 30px;
  cursor: pointer;
  color: #564946;
}

Answer 2

您只需指定要影响的元素。比如有两种方法可以解决

仅适用于 .top-buttons 中的按钮的样式：

.top-buttons > button {
  display: inline-block;
  border: none;
  text-align: center;
  text-decoration: none;
  margin: 15px 30px;
  cursor: pointer;
  color: #564946;
}

所有按钮的样式

button {
  display: inline-block;
  border: none;
  text-align: center;
  text-decoration: none;
  margin: 15px 30px;
  cursor: pointer;
  color: #564946;
}

如何正确地将 CSS 应用于按钮元素？

How do I properly apply CSS to button elements?

html

css

button