试图找到选择器来更改 Wordpress 中 Phone 数字文本的颜色

Question

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

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

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

更新：

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

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

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

Answer 1

Harry 在上面的评论中是正确的。 CSS 是关于特异性的。这样想：如果我走进一个满是人的房间说，"Hey, guys!" 所有的人都转过身来。如果我走进同一个房间说，"Hey, Dave!" 只有叫 Dave 的人会回应。如果我说 "Hey, Dave Nelson!" 很可能只适用于一个人。更具体的说明"wins."

浏览器会将您的 CSS 应用到 .phone-text 与 #masthead .header-right-wrap .extract-element .phone-text 应用相同的属性进行比较。更具体的获胜；呈现颜色#fff。 “.phone-text 位于 .extract-element 内，位于 .header-right-wrap 内，出现在 #masthead 中”比 "anything called .phone-text" 更具体。

如果您将 .phone-text 移动到该容器节奏之外，您的颜色将被应用。如果您设置属性而 #masthead .header-right-wrap .extract-element .phone-text 没有设置 - 就像边框一样 - 只需 .phone-text 就可以了。

试图找到选择器来更改 Wordpress 中 Phone 数字文本的颜色

Trying to find the selector to change colour of Phone Number text in Wordpress

css

wordpress

media-queries