Question

我正在努力缩小智能手机标题的大小。

我的style.css中标题的样式如下：

.hero-unit h3{
    font-size:48px;
    font-weight:500;
    margin:20px 0;
}

在@media (max-width: 480px)下我希望标题大小为30px，保证金为10px，所以我添加了

.hero_unit h3{
    font-size:30px !important;
    margin:10px 0 !important;
  }

!important位是为了确保style.css中的属性不会覆盖这些属性。但是，当我在智能手机上打开网站时，不会应用这些样式，或者在我的笔记本电脑上将窗口尺寸缩小到480px以下。

当我点击'inspect element'时，附加到h3的唯一样式（除了继承的样式）是来自style.css的样式。看不到其他人，甚至没有划掉。

任何想法是什么问题以及如何解决它？

Answer 1

根据我的评论，我的猜测是你的主要CSS写道：

.hero-unit h3 {}

但你的媒体查询css写道

.hero_unit h3 {}

如果这是正确的，那么你不应该使用！important;

Answer 2

在这些代码中，您的选择器有问题 .hero-unit与.hero_unit不同!!!不是吗？