当我尝试改变颜色时颜色不会改变[关闭]答案

【问题标题】：color doesnt change when i try it ti change [closed]当我尝试改变颜色时颜色不会改变[关闭]
【发布时间】：2021-08-19 13:03:02
【问题描述】：

为什么标签的颜色不改变，我不太明白，有标签“电话”，在css中我试图改变颜色，但没有用，对不起愚蠢的问题 enter image description here

enter image description here

enter image description here enter image description here

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 和这个question checklist 时，您可能会发现阅读网站help section 很有用。您为解决问题而编写的代码应包含minimal reproducible example，并包含在您的问题中。
最好包含您的 index.html 文件。可能class="phone" 的使用不正确。也许还有其他类和 css 样式覆盖。您可以使用color: black !important，但这不是首选。属性颜色用于文本。如果您想为 div 着色，请使用 background-color 作为 css-property。

标签： javascript html css visual-studio web

【解决方案1】：

CSS Cascades，也就是说属性是继承的，但是当两个选择器试图改变同一个属性时会发生什么，比如color？ CSS 选择了更具体的一个。您可以阅读有关 CSS 特异性的更多信息，但只要说“更接近”的选择器胜出就足够了。考虑以下两个 HTML。第一个将外部a 标记设置为蓝色，然后设置为更具体的颜色。第二个我翻转了元素。

.phone {
  color: black;
}

<a href=#>
  <div class="phone">
    What Color Should I be?
  </div>
</a>

<br />

<div class="phone">
  <a href=#>
    What Color Should I be?
  </a>
</div>

为什么会发生这种情况有点令人困惑，因为蓝色是从哪里来的？好吧，每个浏览器都有一个“用户代理样式表”，它注入了自己的一组样式。在这种情况下，a 元素（如果它有一个 href）将获得此样式表设置的蓝色！

就像影响元素的组合 CSS 属性看起来像这样

a {
  color: blue;
}

.phone {
  color: black;
}

现在，应该很容易看出有些东西会覆盖您尝试设置的样式。

【讨论】：

【解决方案2】：

电话必须是<a href> 标签？如果是这种情况，请尝试将其放入 css 文件中

.phone a {
text-decoration: none;
color: black;
}

【讨论】：

【解决方案3】：

您正在尝试设置 <a></a> 的样式，因此如上所述，您需要检查 css 特异性

<div class="phone">
  <a href="#">8 (800) 775-16-41</a>
</div>

css

a {
  text-decoration: none;
  color: inherit;
}

.phone {
  color: black;
}

【讨论】：