我敢肯定以前必须提到/问过,但一直在寻找一个没有运气的年龄,我的术语一定是错的!
I vaguely remember a tweet I saw a while ago that suggested that there was a css rule available that would remove any styles previously set in the stylesheet for a particular element.
一个很好的使用示例可能是在移动优先的RWD站点中,其中用于小屏幕视图中的特定元素的大部分样式需要“重置”或移除桌面视图中的相同元素 .
一个css规则,可以实现如下:
.element {
all: none;
}
用法示例:
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
@media only screen and (min-width: 980px) {
.element {
all: none;
}
}
因此,我们可以快速删除或重新设置样式,而无需声明每个属性 .
说得通?
14 回答
CSS3关键字
initial
设置CSS3 property to the initial value as defined in the spec . 除了IE和Opera Mini系列之外,initial
关键字的broad browser support .由于IE缺乏支持可能会导致问题,因为您可以将一些CSS属性重置为其初始值的一些方法:
Relevent github repo with a december 2017 more exaustive list
Related
Related from MDN
Related W3C specs
正如@ user566245的评论中提到的:
[编辑时间2月4日,'17]投票成为现代规范,用户Joost
W3的例子
JAVASCRIPT?
除了css之外没有人想过重置css?是?
剪辑完全相关:https://stackoverflow.com/a/14791113/845310
2013年2月9日20:15由VisioN回答
这一切都说明了;我不认为css重置是可行的,除非我们最终只有一个Web浏览器..如果最终由浏览器设置'default' .
为了比较,这里是
<blockquote style="all: unset;font-style: oblique">
的Firefox 40.0值列表,其中font-style: oblique
触发DOM操作 .对于未来的读者 . 我认为这是意思,但目前还没有得到广泛的支持(见下文):
支持(source):Chrome 37,Firefox 27,IE 11,Opera 24
不支持:Safari
让我彻底回答这个问题,因为这几年来一直是我痛苦的根源,很少有人真正理解这个问题以及为什么要解决这个问题很重要 . 如果我对CSS规范负有全部责任,我坦率地说,因为在过去十年中没有解决这个问题 .
The Problem
您需要将标记插入HTML文档,并且需要以特定方式查找 . 此外,您不拥有此文档,因此您无法更改现有的样式规则 . 您不知道样式表可能是什么,或者它们可能会改变什么 .
用例是指为未知的第三方网站提供可显示的组件 . 这方面的例子是:
广告代码
构建插入内容的浏览器扩展
任何类型的小部件
Simplest Fix
将所有内容放在iframe中 . 这有它自己的一套限制:
跨域限制:您的内容根本无法访问原始文档 . 您无法覆盖内容,修改DOM等 .
显示限制:您的内容被锁定在矩形内 .
如果您的内容可以放入框中,您可以通过让您的内容编写iframe并明确设置内容来解决问题#1,从而绕过问题,因为iframe和文档将共享同一个域 .
CSS Solution
我一直在寻找解决方案,但遗憾的是没有 . 您可以做的最好的事情是显式覆盖所有可以覆盖的可能属性,并将它们覆盖到您认为其默认值应该是什么 .
即使您覆盖,也无法确保更有针对性的CSS规则不会覆盖您的规则 . 您可以在这里做的最好的事情是尽可能具体地覆盖覆盖规则,并希望父文档不是父元素,并在所有属性值定义上使用!important .
这个问题找到了一个全新的解决方案 .
因此,如果元素具有类名
remove-all-styles
:例如:
HTML:
使用CSS:
将
other-class
,another-class
以及所有其他继承和应用的样式应用的所有样式重置为div
.或者在你的情况下:
会做 .
Click here to know difference between author, user, user-agent styles.
例如:如果我们想 isolate embedded widgets/components from the styles of the page that contains them ,我们可以写:
这将使所有
author styles
(即开发人员CSS)恢复为user styles
(我们网站的用户设置的样式 - 不太可能的情况)或user-agent
样式本身(如果没有设置用户样式) .更多细节:https://developer.mozilla.org/en-US/docs/Web/CSS/revert
唯一的问题是support:在撰写本文时,只有Safari 9.1和iOS Safari 9.3支持
revert
值 .所以我会说使用这种风格并回退到任何其他答案 .
另一种方式:
1)包含Yahoo CSS reset的css代码(文件),然后将所有内容放在此DIV中:
2)或使用http://www.cssreset.com
我不建议使用此处标记为正确的答案 . 它是一大堆CSS,试图涵盖一切 .
我建议您评估如何根据每个案例从元素中删除样式 .
让我们说出于搜索引擎优化的目的,您需要在页面中包含H1,该页面在设计中没有实际的 Headers . 您可能希望将该页面的导航链接设为H1,但是当然您不希望该导航链接在页面上显示为巨型H1 .
你应该做的是将该元素包装在h1标签中并检查它 . 了解CSS样式专门应用于h1元素 .
假设我看到以下样式应用于元素 .
现在你需要确定应用于H1的确切样式并在css类中取消它们 . 这将类似于以下内容:
这更加清晰,并不只是将随机的代码块转储到你的css中,你不知道它实际上在做什么 .
现在您可以将此类添加到您的h1
如果您碰巧在构建系统中使用sass,那么在所有主流浏览器中都可以使用的一种方法是使用:not()选择器包装所有样式导入,如此...
然后,您可以在容器上使用禁用类,子内容将不具有任何样式 .
当然所有的样式现在都会以:not()选择器为前缀,所以它有点难看,但效果很好 .
在我的特定场景中,我想跳过将常用样式应用到页面的特定部分,更好地说明如下:
在搞乱CSS重置并没有带来太多成功之后(主要是因为规则优先级和复杂的样式表层次结构),提出了无处不在的jQuery来拯救,这使得工作非常快速且合理地变脏:
(现在讲一下用JS来处理CSS是多么邪恶:-))
你提到了移动优先网站...对于响应式设计,它当然可以覆盖大屏幕风格的小屏幕风格 . 但你可能不需要 .
试试这个:
这些媒体查询不重叠,因此它们的规则不会相互覆盖 . 这样可以更容易地分别维护每组样式 .
对于那些试图找出如何仅从元素中删除样式的人,而不从文件中删除css,此解决方案适用于jquery:
如果你在类中设置CSS,你可以使用jQuery removeClass()方法轻松删除它们 . 下面的代码删除.element类:
如果未指定参数,则此方法将从所选元素中删除所有类名 .
你有没有机会寻找重要规则?它不会撤消所有声明,但它提供了一种覆盖它们的方法 .
“当一个!important规则用于一个样式声明时,这个声明会覆盖CSS中的任何其他声明,无论它在声明列表中的哪个位置 . 虽然,!important与特异性无关 . ”
https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception
BETTER SOLUTION
下载"copy/paste" stylesheet将css属性重置为默认值(UA样式):
https://github.com/monmomo04/resetCss.git
谢谢@Milche Patern!
我真的在寻找重置/默认样式属性值 . 我的第一次尝试是从根(html)元素的浏览器开发工具中复制计算值 . 但是在计算时,它会在每个系统上看起来/工作不同 .
对于那些在尝试使用星号*来重置子元素的样式时遇到浏览器崩溃的人,并且我知道它没有崩溃;我在Chrome版本46.0.2490.71 m .
最后,值得一提的是,这些属性会将样式重置为topest根元素的默认样式,而不是每个HTML元素的初始值 . 所以为了纠正这个问题,我采用了基于webkit的"user-agent"样式的浏览器,并在"reset-this"类下实现了它 .
有用的链接:
下载"copy/paste" stylesheet将css属性重置为默认值(UA样式):
https://github.com/monmomo04/resetCss.git
用户代理风格:
Browsers' default CSS for HTML elements
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Css特定(注意特定):
https://css-tricks.com/specifics-on-css-specificity/
https://github.com/monmomo04/resetCss.git
不,这只是更好地管理您的CSS结构的问题 .
在你的情况下,我会订购我的CSS这样的东西:
试试吧 .