仅为元素重置/删除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 {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;}/* basic modern patch */#reset-this-root {
    all: initial;
    * {
        all: unset;
    }}

• 相关的GitHub回购2017年12月更令人激动的名单

• 相关

• 与MDN相关

• 相关W3C规范

正如@user 566245的评论中提到的：

这在原则上是正确的，但个人里程可能有所不同。例如，某些元素，如TextArea默认有一个边框，应用此重置将使那些TextArea的边框减少。

[发布编辑2月4日，‘17]更新为成为现代规范，用户乔斯特

#reset-this-parent {
  all: initial;
  * {
    all: unset;
  }}

来自W3的示例

例如，如果作者指定了一个元素的All：Initial，它将阻止所有继承并重置所有属性，就好像在级联的作者、用户或用户代理级别中没有出现任何规则一样。

这对于页面中包含的“小部件”的根元素很有用，它不希望继承外部页面的样式。但是，请注意，应用于该元素的任何“默认”样式(例如，显示：在块元素上的UA样式表中的块)也会被吹走。

---

JavaScript？

没有人想过除了CSS来重置CSS？是?

这一点完全相关：https://stackoverflow.com/a/14791113/845310

getElementsByTagName(“*”)将返回DOM中的所有元素。然后可以为集合中的每个元素设置样式：

二月九日十三日二时十五分由异象答覆

var allElements = document.getElementsByTagName("*");for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...}

---

尽管如此，我不认为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 {
  all: initial;
  * {
    all: unset;
  }}

• 支持(

  来源

  )：Chrome 37，Firefox 27，IE 11，Opera 24
• 不支持：Safari