仅为元素重置/删除CSS样式

Question

仅为元素重置/删除CSS样式

我肯定这之前肯定有人提过/问过，但我一直在寻找一个没有运气的时代，我的术语一定是错的！

我隐约记得不久前看到的一条推文，其中指出有一个CSS规则可以删除以前在样式表中为特定元素设置的任何样式。

一个很好的使用示例可能是在移动第一的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;
  }}

因此，我们可以快速移除或重新设置样式，而不必声明每个属性。

合乎道理?

Answer 1

CSS 3关键字initial设置属性设置为规范中定义的初始值。..这个initial关键字有广泛的浏览器支持除了IE和歌剧院的迷你家庭。由于IE的缺乏支持可能会导致问题，这里有一些方法可以将一些CSS属性重置为它们的初始值：.reset-this&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;animation&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;animation-delay&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;animation-direction&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;animation-duration&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;animation-fill-mode&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;animation-iteration-count&nbsp;:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;animation-name&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;animation-play-state&nbsp;:&nbsp;running; &nbsp;&nbsp;&nbsp;&nbsp;animation-timing-function&nbsp;:&nbsp;ease; &nbsp;&nbsp;&nbsp;&nbsp;backface-visibility&nbsp;:&nbsp;visible; &nbsp;&nbsp;&nbsp;&nbsp;background&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background-attachment&nbsp;:&nbsp;scroll; &nbsp;&nbsp;&nbsp;&nbsp;background-clip&nbsp;:&nbsp;border-box; &nbsp;&nbsp;&nbsp;&nbsp;background-color&nbsp;:&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;background-image&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;background-origin&nbsp;:&nbsp;padding-box; &nbsp;&nbsp;&nbsp;&nbsp;background-position&nbsp;:&nbsp;0&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background-position-x&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background-position-y&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background-repeat&nbsp;:&nbsp;repeat; &nbsp;&nbsp;&nbsp;&nbsp;background-size&nbsp;:&nbsp;auto&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;border&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-width&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;border-color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-left-radius&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-right-radius&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-width&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;border-collapse&nbsp;:&nbsp;separate; &nbsp;&nbsp;&nbsp;&nbsp;border-image&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-left&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-left-color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;border-left-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-left-width&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;border-radius&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-right&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-right-color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;border-right-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-right-width&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;border-spacing&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-top&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-top-color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;border-top-left-radius&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-top-right-radius&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;border-top-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;border-top-width&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;bottom&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;box-shadow&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;box-sizing&nbsp;:&nbsp;content-box; &nbsp;&nbsp;&nbsp;&nbsp;caption-side&nbsp;:&nbsp;top; &nbsp;&nbsp;&nbsp;&nbsp;clear&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;clip&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;columns&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;column-count&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;column-fill&nbsp;:&nbsp;balance; &nbsp;&nbsp;&nbsp;&nbsp;column-gap&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;column-rule&nbsp;:&nbsp;medium&nbsp;none&nbsp;currentColor; &nbsp;&nbsp;&nbsp;&nbsp;column-rule-color&nbsp;:&nbsp;currentColor; &nbsp;&nbsp;&nbsp;&nbsp;column-rule-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;column-rule-width&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;column-span&nbsp;:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;column-width&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;content&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;counter-increment&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;counter-reset&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;cursor&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;direction&nbsp;:&nbsp;ltr; &nbsp;&nbsp;&nbsp;&nbsp;display&nbsp;:&nbsp;inline; &nbsp;&nbsp;&nbsp;&nbsp;empty-cells&nbsp;:&nbsp;show; &nbsp;&nbsp;&nbsp;&nbsp;float&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;font&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;font-family&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;font-size&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;font-style&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;font-variant&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;font-weight&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;height&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;hyphens&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;left&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;letter-spacing&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;line-height&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;list-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;list-style-image&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;list-style-position&nbsp;:&nbsp;outside; &nbsp;&nbsp;&nbsp;&nbsp;list-style-type&nbsp;:&nbsp;disc; &nbsp;&nbsp;&nbsp;&nbsp;margin&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;margin-left&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;margin-right&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;margin-top&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;max-height&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;max-width&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;min-height&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;min-width&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;opacity&nbsp;:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;orphans&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;outline&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;outline-color&nbsp;:&nbsp;invert; &nbsp;&nbsp;&nbsp;&nbsp;outline-style&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;outline-width&nbsp;:&nbsp;medium; &nbsp;&nbsp;&nbsp;&nbsp;overflow&nbsp;:&nbsp;visible; &nbsp;&nbsp;&nbsp;&nbsp;overflow-x&nbsp;:&nbsp;visible; &nbsp;&nbsp;&nbsp;&nbsp;overflow-y&nbsp;:&nbsp;visible; &nbsp;&nbsp;&nbsp;&nbsp;padding&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;padding-left&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;padding-right&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;padding-top&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;page-break-after&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;page-break-before&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;page-break-inside&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;perspective&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;perspective-origin&nbsp;:&nbsp;50%&nbsp;50%; &nbsp;&nbsp;&nbsp;&nbsp;position&nbsp;:&nbsp;static; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;May&nbsp;need&nbsp;to&nbsp;alter&nbsp;quotes&nbsp;for&nbsp;different&nbsp;locales&nbsp;(e.g&nbsp;fr)&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;quotes&nbsp;:&nbsp;'\201C'&nbsp;'\201D'&nbsp;'\2018'&nbsp;'\2019'; &nbsp;&nbsp;&nbsp;&nbsp;right&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;tab-size&nbsp;:&nbsp;8; &nbsp;&nbsp;&nbsp;&nbsp;table-layout&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;text-align&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;text-align-last&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration-color&nbsp;:&nbsp;inherit; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration-line&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;text-decoration-style&nbsp;:&nbsp;solid; &nbsp;&nbsp;&nbsp;&nbsp;text-indent&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;text-shadow&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;text-transform&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;top&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;transform&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;transform-style&nbsp;:&nbsp;flat; &nbsp;&nbsp;&nbsp;&nbsp;transition&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;transition-delay&nbsp;:&nbsp;0s; &nbsp;&nbsp;&nbsp;&nbsp;transition-duration&nbsp;:&nbsp;0s; &nbsp;&nbsp;&nbsp;&nbsp;transition-property&nbsp;:&nbsp;none; &nbsp;&nbsp;&nbsp;&nbsp;transition-timing-function&nbsp;:&nbsp;ease; &nbsp;&nbsp;&nbsp;&nbsp;unicode-bidi&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align&nbsp;:&nbsp;baseline; &nbsp;&nbsp;&nbsp;&nbsp;visibility&nbsp;:&nbsp;visible; &nbsp;&nbsp;&nbsp;&nbsp;white-space&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;widows&nbsp;:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;width&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;word-spacing&nbsp;:&nbsp;normal; &nbsp;&nbsp;&nbsp;&nbsp;z-index&nbsp;:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;basic&nbsp;modern&nbsp;patch&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;initial; &nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;unset;}/*&nbsp;basic&nbsp;modern&nbsp;patch&nbsp;*/#reset-this-root&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;initial; &nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;unset; &nbsp;&nbsp;&nbsp;&nbsp;}}相关的GitHub回购2017年12月更令人激动的名单相关与MDN相关相关W3C规范正如@user 566245的评论中提到的：这在原则上是正确的，但个人里程可能有所不同。例如，某些元素，如TextArea默认有一个边框，应用此重置将使那些TextArea的边框减少。[发布编辑2月4日，‘17]更新为成为现代规范，用户乔斯特#reset-this-parent&nbsp;{ &nbsp;&nbsp;all:&nbsp;initial; &nbsp;&nbsp;*&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;unset; &nbsp;&nbsp;}}来自W3的示例例如，如果作者指定了一个元素的All：Initial，它将阻止所有继承并重置所有属性，就好像在级联的作者、用户或用户代理级别中没有出现任何规则一样。这对于页面中包含的“小部件”的根元素很有用，它不希望继承外部页面的样式。但是，请注意，应用于该元素的任何“默认”样式(例如，显示：在块元素上的UA样式表中的块)也会被吹走。JavaScript？没有人想过除了CSS来重置CSS？是?这一点完全相关：https://stackoverflow.com/a/14791113/845310getElementsByTagName(“*”)将返回DOM中的所有元素。然后可以为集合中的每个元素设置样式：二月九日十三日二时十五分由异象答覆var&nbsp;allElements&nbsp;=&nbsp;document.getElementsByTagName("*");for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;len&nbsp;=&nbsp;allElements.length;&nbsp;i&nbsp;<&nbsp;len;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;element&nbsp;=&nbsp;allElements[i]; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;element.style.border&nbsp;=&nbsp;...}尽管如此，我不认为CSS重置是可行的，除非我们只有一个浏览器。如果“默认”在最后由浏览器设置。作为比较，下面是Firefox 40.0值列表。<blockquote style="all: unset;font-style: oblique">哪里font-style: oblique触发DOM操作。align-content: unset;align-items: unset;align-self: unset;animation: unset;appearance: unset;backface-visibility: unset;background-blend-mode: unset;background: unset;binding: unset;block-size: unset;border-block-end: unset;border-block-start: unset;border-collapse: unset;border-inline-end: unset;border-inline-start: unset;border-radius: unset;border-spacing: unset;border: unset;bottom: unset;box-align: unset;box-decoration-break: unset;box-direction: unset;box-flex: unset;box-ordinal-group: unset;box-orient: unset;box-pack: unset;box-shadow: unset;box-sizing: unset;caption-side: unset;clear: unset;clip-path: unset;clip-rule: unset;clip: unset;color-adjust: unset;color-interpolation-filters: unset;color-interpolation: unset;color: unset;column-fill: unset;column-gap: unset;column-rule: unset;columns: unset;content: unset;control-character-visibility: unset;counter-increment: unset;counter-reset: unset;cursor: unset;display: unset;dominant-baseline: unset;empty-cells: unset;fill-opacity: unset;fill-rule: unset;fill: unset;filter: unset;flex-flow: unset;flex: unset;float-edge: unset;float: unset;flood-color: unset;flood-opacity: unset;font-family: unset;font-feature-settings: unset;font-kerning: unset;font-language-override: unset;font-size-adjust: unset;font-size: unset;font-stretch: unset;font-style: oblique;font-synthesis: unset;font-variant: unset;font-weight: unset;font: ;force-broken-image-icon: unset;height: unset;hyphens: unset;image-orientation: unset;image-region: unset;image-rendering: unset;ime-mode: unset;inline-size: unset;isolation: unset;justify-content: unset;justify-items: unset;justify-self: unset;left: unset;letter-spacing: unset;lighting-color: unset;line-height: unset;list-style: unset;margin-block-end: unset;margin-block-start: unset;margin-inline-end: unset;margin-inline-start: unset;margin: unset;marker-offset: unset;marker: unset;mask-type: unset;mask: unset;max-block-size: unset;max-height: unset;max-inline-size: unset;max-width: unset;min-block-size: unset;min-height: unset;min-inline-size: unset;min-width: unset;mix-blend-mode: unset;object-fit: unset;object-position: unset;offset-block-end: unset;offset-block-start: unset;offset-inline-end: unset;offset-inline-start: unset;opacity: unset;order: unset;orient: unset;outline-offset: unset;outline-radius: unset;outline: unset;overflow: unset;padding-block-end: unset;padding-block-start: unset;padding-inline-end: unset;padding-inline-start: unset;padding: unset;page-break-after: unset;page-break-before: unset;page-break-inside: unset;paint-order: unset;perspective-origin: unset;perspective: unset;pointer-events: unset;position: unset;quotes: unset;resize: unset;right: unset;ruby-align: unset;ruby-position: unset;scroll-behavior: unset;scroll-snap-coordinate: unset;scroll-snap-destination: unset;scroll-snap-points-x: unset;scroll-snap-points-y: unset;scroll-snap-type: unset;shape-rendering: unset;stack-sizing: unset;stop-color: unset;stop-opacity: unset;stroke-dasharray: unset;stroke-dashoffset: unset;stroke-linecap: unset;stroke-linejoin: unset;stroke-miterlimit: unset;stroke-opacity: unset;stroke-width: unset;stroke: unset;tab-size: unset;table-layout: unset;text-align-last: unset;text-align: unset;text-anchor: unset;text-combine-upright: unset;text-decoration: unset;text-emphasis-position: unset;text-emphasis: unset;text-indent: unset;text-orientation: unset;text-overflow: unset;text-rendering: unset;text-shadow: unset;text-size-adjust: unset;text-transform: unset;top: unset;transform-origin: unset;transform-style: unset;transform: unset;transition: unset;user-focus: unset;user-input: unset;user-modify: unset;user-select: unset;vector-effect: unset;vertical-align: unset;visibility: unset;white-space: unset;width: unset;will-change: unset;window-dragging: unset;word-break: unset;word-spacing: unset;word-wrap: unset;writing-mode: unset;z-index: unset;

Answer 2

未来的读者。我认为这是什么意思，但目前并没有得到广泛的支持(见下文)：#someselector&nbsp;{ &nbsp;&nbsp;all:&nbsp;initial; &nbsp;&nbsp;*&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;all:&nbsp;unset; &nbsp;&nbsp;}}支持(来源)：Chrome 37，Firefox 27，IE 11，Opera 24不支持：Safari