我正在为任何 CMS 编写一个应用程序,我不知道周围的 CSS 或其选择器,但希望我的应用程序始终看起来相同。
我遇到问题,如果外部选择器通过 button{height: 100px;}
和我的选择器 button .class{width:100px 选择我的元素之一;}
没有指定 height
属性,外部选择器将此属性放到我的按钮上并更改其样式。
这只是一个简单的示例,您可能会说,“也只需在选择器中指定 height
”,我无法将每个可以想到的属性放入我的选择器中并覆盖可能已在某处设置的所有内容.
请参阅此 fiddle 的简单示例:https://jsfiddle.net/u4rvx6Lk/ ,我不希望第一个选择器在我的蓝色元素上设置边框,但当然,它确实如此。
我已经尝试过 all: unset;
和 all: initial;
但它不起作用,而且在 Internet Explorer 中当然也不起作用。
我也了解作用域 CSS,但这也不是很可靠。
(更多信息:这是一个 Angular 1.x 应用程序,主要会注入(inject)到 WordPress CMS 页面中,我使用 sass 编译 CSS)
最佳答案
对我有用的解决方案是使用 CSS 属性 all
设置为 revert
值。
.css-class {
all: revert;
}
mozilla docs for revert解释得很好:
The revert CSS keyword rolls back the cascade so that the property takes on the value it would have had if there were no styles in the current style origin.
对于 Firefox 和 Chrome,请使用 unset
:
.css-class {
all: unset;
}
参见browser hacks使用“媒体查询黑客”检查当前浏览器的跨浏览器解决方案。另外,请参阅此 fiddle ,其中蓝色框不继承高度属性:
我希望这个解决方案也适用于您的元素。
关于html - 使用我的 CSS 选择器覆盖所有给定的 CSS 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41556324/