如何正确为button元素应用CSS，解决样式不生效问题？

问题原因 #

1. 你定义的.button是类选择器，仅会匹配带有class="button"属性的元素，但你现有HTML代码中的所有<button>标签都没有添加该类，因此这部分样式没有匹配到任何元素，自然不会生效。
2. #first-button的border-radius生效是因为你用ID选择器精准匹配到了对应按钮元素，选择器逻辑是正确的。
3. 你将选择器改为.top-buttons不生效，是因为你写的border、margin、cursor等属性默认不会从父容器继承给子级的按钮元素，仅写在父容器上对按钮本身无效果。
4. 额外小问题：你HTML代码中容器的闭合标签写错了，最后一行应该是</div>而非<div>，不过该问题不影响本次样式失效。

解决方法 #

• 方案一：给所有按钮添加button类，修改后的HTML代码如下：

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

• 方案二：修改CSS选择器，直接匹配按钮元素，无需修改HTML：
  可以改为元素选择器button，或者更精准的后代选择器.top-buttons button，代码示例：

.top-buttons 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%;
}

补充说明 #

该问题和Atom编辑器没有任何关联，编辑器仅负责代码编写，只要你保存的代码内容正确，浏览器就会正常解析，无需怀疑编辑器本身的问题。

内容的提问来源于stack exchange，提问作者Paul Clauss