用自定义CSS覆盖媒体查询的样式

我正在为现有系统编写一些overrides.css，并想知道我可以覆盖某些样式的方式。我没有访问系统的CSS，所以我不能重写它。用自定义CSS覆盖媒体查询的样式

如果我在原来的系统定义如下：

#criterionDetailsWrapper { 
    background-color: green; 
} 

@media screen and (max-width: 979px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
} 


@media screen and (max-width: 667px) { 
    #criterionDetailsWrapper { 
     background-color: grey; 
    } 
}

我怎么能如覆盖这些样式有

I.一个属性覆盖所有尺寸：

.criterionDetailsWrapper { 
    background-color: grey; 
}

II。重写一个属性更改为没有2个断点，但只有1个断点在600px？

#criterionDetailsWrapper { 
    background-color: grey; 
} 


@media screen and (max-width: 600px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
}

是!important做到这一点的唯一途径，或者我需要模仿所有选择（以获得相同的特异性），并确保我的自定义CSS渲染最后？

来源

2017-08-08 zmii

是类选择一个错字或做你想要的规则适用于与该类的所有元素，它将覆盖系统规则具有该类别的元素也具有该ID的情况？ – BoltClock

其实媒体查询不会使特异性更高。这就是您在修改声明之后声明它们的原因。因此，只要您处理媒体查询中包含的所有属性（并且它们的特异性仍然相同），那么以css风格声明它们就足够了。

请记住在要覆盖的样式之后加载overrides.css。

而且丑陋的黑客（但完全符合CSS规范线），alows您可以通过链接class和id选择与自己战斗的特异性。

.class.class具有比.class更高的特异性，但低于.class.class.class。

这是坏的，但可能会导致比!important更少的问题。只要override.css来修改样式表（一个或多个）之后，你提出

在你的情况，例子应该工作。

// orginal.css 
#criterionDetailsWrapper { 
    background-color: green; 
} 

@media screen and (max-width: 979px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
} 


@media screen and (max-width: 667px) { 
    #criterionDetailsWrapper { 
     background-color: grey; 
    } 
}

将被改写：

// override.css 
#criterionDetailsWrapper { 
    background-color: grey; 
}

在任何屏幕尺寸将是grey现在。

// override.css 
#criterionDetailsWrapper { 
    background-color: grey; 
} 


@media screen and (max-width: 600px) { 
    #criterionDetailsWrapper { 
     background-color: blue; 
    } 
}

这将有grey背景现在，除非屏幕尺寸高达600px，到时将有blue颜色。 979px和667px将被忽略。

更多的话题：

Calculating specificity - W3C规范

来源

2017-08-08 15:16:58 Olaf

I：我会建议按照你所说的添加特异性检查元素，你可以确保你的班级会有优先权。！使用

.parents .... #criterionDetailsWrapper { 
    background-color: grey; 
}

重要的是一种不好的做法，但仍然有效...

II：不能取消对一个CSS媒体查询，而不是你可以覆盖它作为你的愿望

@media screen and (max-width: 600px) { 
    .parents... #criterionDetailsWrapper { 
     background-color: blue; 
    } 
}

然后定义您的新媒体查询

来源

2017-08-08 13:00:24

因此，复制精确查询并改变它或使查询更具体将工作？ – zmii

是让你的查询更具体将使你的房产相关... –

@zmii是的，你可以阅读这个https://css-tricks.com/specifics-on-css-specificity/有效地覆盖你的选择器而不使用！重要。！重要可以是唯一的选择，当你想覆盖通过JavaScript注入的内联样式或样式时，它似乎不是你的情况。基本上：具有相同特性的最后一条规则覆盖了前一条 –

用自定义CSS覆盖媒体查询的样式

回答

相关问题