html - 用我的CSS选择器覆盖所有给定的CSS样式

原文 标签 html css html5 css3 css-selectors

我正在为任何CMS编写一个应用程序,我不知道周围的CSS或它的选择器,但希望我的应用程序总是看起来一样。
我有一个问题,如果外部选择器选择了我的一个元素,例如viabutton{height: 100px;},而我的选择器没有指定button .class{width:100px;}属性,则外部选择器会将此属性放到我的按钮上并更改其样式。
这只是一个简单的例子,您可能会说,“在选择器中也指定height”,我无法将所有可思考的属性放入选择器中,并覆盖可能在某个地方设置的所有属性。
请看这个小提琴简单的例子:https://jsfiddle.net/u4rvx6Lk/,在这里我不希望第一个选择器设置我的蓝色元素的边框,但当然,它设置了。
我尝试过heightall: unset;,但它在Internet Explorer中不起作用,当然也不会。
我也知道CSS的作用域,但这也不是很可靠的工作。
(进一步的信息:这是一个角度1.x的应用程序,将主要注入WordPressCMS页面,我使用sass编译我的CSS)

最佳答案

对我有效的解决方案是使用CSS属性all设置为revert的值。

.css-class {
    all: revert;
}

mozilla docs for revert很好地解释了这一点:
revert CSS关键字回滚层叠,以便该属性接受当前样式原点中没有样式时的值。
对于firefox和chrome,使用unset
.css-class {
    all: unset;
}

有关使用“媒体查询黑客”检查当前浏览器的跨浏览器解决方案,请参见browser hacks。另外,请参见此小提琴,其中蓝色框不继承height属性:
我希望这个解决方案也能在你的项目中发挥作用。

关于html - 用我的CSS选择器覆盖所有给定的CSS样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41556324/

相关文章:

html5 - 如何更改html5输入类型为“date”的默认日期格式

html5 - 可靠地检测用户是否在网页上使用鼠标?

HTML 文本框输入工具提示?

javascript - 我如何使用正则表达式和JavaScript将1 1/2重新格式化为相当一部分HTML

javascript - 尝试将jquery元素从display:hidden更改为display:block

CSS 嵌套的 nth-child() 表现得很奇怪

html - 放大时html图像移动

javascript - HTML5性能-将<tr>添加到表中间与表尾

javascript - 使用Jquery将元素动画化到窗口的右边缘吗?

html - 删除 Bootstrap 4 DataTable 滚动条导致更窄的表