html - 覆盖继承的@media 查询

标签 html css wordpress media-queries

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

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

最佳答案

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

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

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

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

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

您选择的方法可能取决于您要保留多少原始插件样式以及要删除多少。如果您只是重新定义少数规则,那么选项 2 是一个不错的方法。如果您需要将原始样式表分解成碎片,那么选项 1 将不会是维护噩梦。

您提出了向前兼容性的问题:当插件更新为新的样式表时会发生什么?这个问题没有简单的答案。正如我已经提到的,选项 3 在这方面存在固有问题,但其他选项也有其自身的缺陷。大多数插件作者擅长在不同版本之间保持样式 Hook 的一致性,根据我的经验,您所做的任何更改都将在不同版本之间继续工作。但第三方库越大,发生重大变化的可能性就越大。

成熟的电子商务插件(想想 WooCommerce)一旦你开始修改它们的样式,肯定会很痛苦。如果您正在构建一个成熟的电子商务网站,那么我的建议是尽可能多地保留插件的内置样式,并尽可能少地覆盖规则。

关于html - 覆盖继承的@media 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47369838/

相关文章:

html - 将我的下拉菜单放在右边

css - 错误 : File to import not found or unreadable: foundation

css - 选项卡和隐藏内容

javascript - 如何使用 javascript 或 jquery 或 angularjs 将表单输入按钮保存到 json 文件中?

javascript - 有没有办法在包含 html 的变量内循环

php - 尝试对表中的SUM和GROUP BY结果进行排序时出现身份不明的索引

javascript - jQuery .height() 不适用于 box-sizing : border-border

css - Facebook 的 Wordpress 预览问题

php - 如何检查一个值是否存在于两个 WordPress 数据库表之一中

mysql - WordPress:从自定义数据库表生成页面