覆盖继承的@media查询

时间:2017-11-18 18:55:41

标签: html css wordpress media-queries

我通过css为自己的商店设计样式。我正在使用“演示文稿> 我正在使用Wordpress中的插件输出一个商店,我正在为它设计自己的CSS。该插件有一个内置的CSS,所以我覆盖了通过我的CSS继承的样式,但是内置的css也有@media查询,与我网站上的查询不同。

如何使插件的@media查询无效/覆盖 - 我不想修改插件的内置css并在更新时导致问题。

2 个答案:

答案 0 :(得分:1)

我不知道有任何方法可以使已经加载的整个媒体查询无效(虽然也许另一个回答者会证明我错了,这会很棒!)。加载样式表后,您唯一的选择是创建一个相同的媒体查询,重新定义您要覆盖的任何规则。

在处理加载要覆盖的CSS样式的第三方插件时,有几种可能的方法:

1)停止插件加载自己的CSS,并自己从头开始构建它的样式。您可以使用其样式表作为起点,删除/编辑您不想要的任何规则和声明。

2)让插件加载自己的CSS样式,并在样式表中覆盖它们,就像你已经做的那样。您需要覆盖其中包含的有问题的媒体查询和样式。

3)直接编辑插件的CSS文件。这是最脆弱的选项,因为当您更新插件时,您的更改将被覆盖。

您选择的方法可能会通过您希望保留多少原始插件样式以及您想要删除多少来获知。如果您只是重新定义了一些规则,那么选项2是一个很好的方法。如果您需要将原始样式表破解成碎片,那么选项1将不再是维护噩梦。

您提出了向前兼容性问题:使用新样式表更新插件时会发生什么?这个问题没有简单的答案。正如我已经提到的,备选方案3在这方面存在固有问题,但其他选择有其自身的缺陷。大多数插件作者都善于在发行版之间保持其样式挂钩一致,根据我的经验,您所做的任何更改都将在发行版之间继续工作。但是第三方图书馆越大,破坏变化的可能性就越大。

完全成熟的电子商务插件(想想WooCommerce)一旦你开始抨击他们的风格肯定是一种痛苦。如果您正在构建一个完整的电子商务网站,那么我的建议是尝试尽可能多地保留插件的内置样式,并尽可能少地覆盖规则。

答案 1 :(得分:-1)

!importantwidth: 100% !important;

等CSS属性一起使用

如果无法使用其父元素定位您的元素,就像您要修改span.someclass,然后定位p span.someclassbody span.someclass

它会有希望的!