css - 有没有办法将页脚按钮设置为白色

Question

我被要求将页脚按钮的样式设置为白色，但我不确定是我的操作不正确还是代码有问题。

我试过自己编写按钮的代码，但似乎不对

footer {
    width: calc(100% - 2em);
    z-index: 500;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin: 0 1em;
  }

  footer button.mdc-icon-button {
    margin: 0.5em;
    color: white;        
  }

</style>

<div>
  <h2>abdurrahman abdulwahab</h2>
  <div class ="user-photo mdc-elevation--z3">
    <img src="https://via.placeholder.com/150x150">        
  </div>
  <div class="details mdc-elevation--z3">language</div>
  <div class="messages"></div>
</div>

<footer>
  <button class="btn-address mdc-icon-button material-icons">contact_support</button>
  <button class="btn-phone mdc-icon-button material-icons">perm_phone_msg</button>
  <button class="btn-birthdate mdc-icon-button material-icons">calendar_today</button>
</footer>

我希望知道如何设置页脚的样式，以便仅使按钮颜色为白色，而不包括页脚上方的 div。

Answer 1

我假设您正在尝试将背景设置为白色而不是文本颜色，就像当前的情况一样。

如果您尝试将背景设置为白色，则需要将 background: white; 设置为 color 设置文本颜色。

请记住，您需要删除 color 或将值更新为“white”以外的值。