为啥 !important 需要 h1 元素媒体查询才能工作？ [复制]

Posted 2023-03-05

【中文标题】为啥 !important 需要 h1 元素媒体查询才能工作？ [复制]

【英文标题】：Why is !important needed for h1 element media query to work? [duplicate]为什么 !important 需要 h1 元素媒体查询才能工作？ [复制]

【发布时间】：2018-10-15 13:15:46

【问题描述】：

除非我添加 !important，否则我的 h1 元素的媒体查询规则集不会生效。为什么它不能自己工作？

媒体查询：

/* Small devices (landscape phones) */
@media screen and (max-width: 767px) 
    h1 
        font-size: 1.6em !important;
    


/* Tablets */
@media screen and (max-width: 991px) 
    h1 
        font-size: 1.7rem;
    


/* Small laptops */
@media screen and (max-width: 1199px) 
    h1 
        font-size: 2rem;
    

【问题讨论】：

!important 会覆盖任何默认的 CSS 属性。这是一个 hack，但它可以工作，并且得到广泛的支持。

见this

css 的顺序很重要。您的 CSS 的具体程度也很重要。请编辑您的问题以仅包含代码的相关部分，并显示受影响 CSS 的顺序

您可能有浏览器扩展或插件会改变有效的 css。

【参考方案1】：

因为后面有一种样式会覆盖它，并且它是最后一个媒体查询中的样式：

@media screen and (max-width: 1199px) 
  h1 
    font-size: 2rem;
  

因此，如果我们只考虑您的 h1 的样式，我们就有这个 CSS：

h1 
  color: #2d3c49;
  text-transform: uppercase;


h1 
  font-weight: 200;
  font-size: 2.6em;
  margin-bottom: 0;


@media screen and (max-width: 767px) 
  h1 
    font-size: 1.6em;
  


@media screen and (max-width: 991px) 
  h1 
    font-size: 1.7rem;
  


/* This one will always win the race !*/
@media screen and (max-width: 1199px) 
  h1 
    font-size: 2rem;
  

<h1>Natalie Cardot</h1>

因此，当您的屏幕低于767px 时，它也低于1199px，这就是为什么不考虑您在第一个媒体查询中定义的样式并且您必须使用!important。为避免这种情况，您需要像这样重新排序您的媒体查询：

h1 
  color: #2d3c49;
  text-transform: uppercase;


h1 
  font-weight: 200;
  font-size: 2.6em;
  margin-bottom: 0;



@media screen and (max-width: 1199px) 
  h1 
    font-size: 2rem;
  

@media screen and (max-width: 991px) 
  h1 
    font-size: 1.7rem;
  

@media screen and (max-width: 767px) 
  h1 
    font-size: 1.6em;
  

<h1>Natalie Cardot</h1>

【参考方案2】：

h1 标签有一个默认大小，为了覆盖它你需要！重要

【讨论】：

不，您不需要!important 来覆盖默认属性