正确应用CSS响应文本

Question

我正在尝试在响应式版本中减少一些标题的大小。我已经尝试了一些css，但没有任何工作。目前，我有以下的主要滑动条文本:

@media only screen and (max-width: 600px) {.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {font-size: 22px;;}}

这是我的网输入图片描述

我哪里错了?

Answer 1

你的css路径现在看起来是这样的

@media only screen and (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px;;
}
}

没有相关的HTML很难说，但我最初的猜测是已经应用在它上面的类比你的新媒体查询更重要。我会尝试添加!important，如果它不起作用，让你的选择器更具体。

@media (max-width: 600px) {
.zphero-banner-style-11 .zpheading, .zshero-banner-style-11 .zpheading {
font-size: 22px !important;
}
}

关于选择器重要性的有趣注意事项:

100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Note: If the element has inline styling that automatically wins (1000 points)

在两个选择器样式中，浏览器总是会选择权重更大的那个。只有当优先级相等时，样式表的顺序才重要——这就是为什么不容易重写Bootstrap的原因。

当前您的媒体查询CSS选择器的值为20点，因为有两个类名指向更改

CSS声明标记为重要覆盖任何其他声明在相同的级联层和起源。虽然从技术上讲，!important与特异性无关，但它与特异性和级联直接相互作用。它颠倒了样式表的级联顺序。这不是最好的做法，但它经常有效