css - 试图找到选择器来更改 Wordpress 中电话号码文本的颜色

Question

我很难尝试覆盖 Wordpress 网站中的样式。我想要做的是创建一个像这样的媒体查询:

@media (max-width: 1100px) {
    .phone-text {
     color: black;
     }
}

当我在 Chrome 的开发工具中查看时，这是该类的实际文本。出于某种原因，当我在网站的自定义 CSS 部分输入它时，它并没有覆盖模板的样式。

更新:

收到尝试以下操作的建议:

@media (max-width: 1100px) {
      #masthead .header-right-wrap .extract-element .phone-text 
      {
      color: black; 
      }
}

我明白了使用更具体的选择器的逻辑，但这并没有覆盖颜色。它似乎可以在开发人员工具中使用，但在 Wordpress 中可能有一些奇怪的地方？

Answer 1

Harry 在上面的评论中是正确的。CSS 是关于特异性的。这样想:如果我走进一个满是人的房间说，“嘿，伙计们!”所有的人都转过身来。如果我走进同一个房间说，“嘿，戴夫!”只有名叫戴夫的人会回应。如果我说“嘿，戴夫尼尔森!”很可能只适用于一个人。更具体的指令“获胜”。

浏览器将应用到 .phone-text 的 CSS 与应用相同属性的 #masthead .header-right-wrap .extract-element .phone-text 进行比较。更具体的获胜；呈现颜色#fff。 “出现在#masthead 中的.header-right-wrap 内的.extract-element 内的.phone-text”比“任何称为.phone-text 的东西”更具体。

如果您将 .phone-text 移到该容器节奏之外，您的颜色将被应用。如果您设置了 #masthead .header-right-wrap .extract-element .phone-text 未设置的属性 - 就像边框 - 只是 .phone-text会做。