CSS 类选择器不起作用，但是当我将它设为 ID 时它起作用？ [复制]答案

【问题标题】：CSS Class Selector won't work, but it works when I make it an ID? [duplicate]CSS 类选择器不起作用，但是当我将它设为 ID 时它起作用？ [复制]
【发布时间】：2020-08-04 23:32:42
【问题描述】：

这非常令人困惑。我有一个要添加到列表项的 CSS 类，但由于某种原因，当我将其分配为类时它不会出现，只有当我将其分配为 id 时才会出现。我显然不希望这样...因为我希望 id 是唯一的，但这似乎是唯一有效的方法？

CSS：

.song-selection {
  background-color: gray;
}

HTML

<!---Set List Card-->
<div class="card-action">
  <h5 id='current-list'>Current Set List</h5>
  <h6 id="set-id-1" class="center">Set #1</h6>
  <hr>
  <ul class='collection set-1' id="set-1">
    <li class="collection-item song-selection">
      Live Wire (AC/DC)
    </li>

【问题讨论】：

奇怪的是，如果我将 CSS 更改为“颜色：白色”之类的东西，该规则就会起作用。只有当我分配一个 id 时，背景颜色似乎才起作用......这是最奇怪的事情。

标签： css class

【解决方案1】：

这可能是因为其他一些 css 规则优先。这可能是由于css specifity 或稍后在 css 中定义的其他规则（然后它也优先）。如果添加!important，那么它应该会覆盖其他样式。

.song-selection {
background-color: gray !important;
}

【讨论】：

谢谢，成功了！
请记住，!important 是一个有用的诊断工具（它确认您的目标是正确的元素），它不是一个好的长期解决方案；相反，您应该简单地增加选择器的特异性或减少当前覆盖您的样式的任何选择器的特异性。我建议阅读为什么我们不应该使用!important，例如：techrangers.cdl.ucf.edu/2018/09/10/css-specificity.html
@ChristopherGuyton 如果答案已经解决了您的问题并且您不需要任何其他帮助，请考虑接受答案。谢谢！