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

63 阅读 0 评论 42 点赞

我是靠谱客的博主优雅朋友，最近开发中收集的这篇文章主要介绍重置/删除仅元素的CSS样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文翻译自：Reset/remove CSS styles for element only

I'm sure this must have been mentioned/asked before but have been searching for an age with no luck, my terminology must be wrong! 我敢肯定，这一定是以前提到过/提出来的，但是一直在寻找一个没有运气的年龄，我的术语一定是错误的！

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. 我模糊地记得我前一段时间看到的一条推文，它暗示有一个CSS规则可用，该规则将删除样式表中先前为特定元素设置的所有样式。

A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs 'resetting' or removing for the same element in the desktop view. 一个很好的使用示例可能是在移动优先RWD网站中，在小屏幕视图中用于特定元素的许多样式需要针对桌面视图中的同一元素进行“重置”或删除。

A css rule that could achieve something like: 一个css规则可以达到以下目的：

.element {
all: none;
}

Example usage: 用法示例：

/* 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;
}
}

So we could quickly remove or re-set styling without having to declare every property. 因此，我们可以快速删除或重新设置样式，而不必声明每个属性。

Makes sense? 说得通？

#1楼

参考：https://stackoom.com/question/14iaE/重置-删除仅元素的CSS样式

#2楼

No, this is just a matter of managing your css structure better. 不，这只是更好地管理CSS结构的问题。

In your case i would order my css something like this: 在您的情况下，我会命令我的CSS像这样：

.element, .element1, .element2 p{z-index: 50; display: block}
.element, .element1{margin: 0 10}
.element2 p{transform: translate3d(0, 0, 0)}
@media only screen and (min-width: 980px) {
.element, .element1, .element2 p{display: none}
}

Just experiment. 只是实验。

#3楼

Any chance you're looking for the !important rule? 您是否正在寻找！重要规则？ It doesn't undo all declarations but it provides a way to override them. 它不会撤消所有声明，但提供了一种覆盖它们的方法。

"When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity." “当在样式声明中使用！important规则时，此声明将覆盖CSS所做的任何其他声明，无论它在声明列表中的位置如何。尽管如此，！important与特定性无关。”

https://developer.mozilla.org/en-US/docs/CSS/Specificity#The_!important_exception https://developer.mozilla.org/zh-CN/docs/CSS/Specificity#The_!important_exception

#4楼

The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec . CSS3关键字initial将CSS3属性设置为spec中定义的初始值。 The initial keyword has broad browser support except for the IE and Opera Mini families. initial关键字具有广泛的浏览器支持，但IE和Opera Mini系列除外。

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values: 由于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;
}
}

Relevent github repo with a december 2017 more exaustive list Relevent github repo以及2017年12月的更多详细列表
Related 有关
Related from MDN 与MDN相关
Related W3C specs 相关W3C规格

As mentioned in a comment by @user566245 : 如@ user566245的评论中所述：

this is correct in principle, but individual mileage may vary. 这在原则上是正确的，但个人里程可能会有所不同。 For example certain elements like textarea by default have a border, applying this reset will render those textarea's border less. 例如，某些元素（例如textarea）默认情况下具有边框，应用此重置将使这些textarea的边框变少。

[POST EDIT FEB 4, '17] Upvoted for becoming a modern norm, user Joost [17年2月4日编辑后]用户Joost赞扬其成为现代规范

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

EXAMPLE FROM W3 W3中的示例

For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. 例如，如果作者在元素上指定all：initial，它将阻止所有继承并重置所有属性，就像级联的author，user或user-agent级别中没有规则一样。

This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. 这对于不希望继承外部页面样式的页面中包含的“窗口小部件”的根元素很有用。 Note, however, that any "default" style applied to that element (such as, eg display: block from the UA style sheet on block elements such as ) will also be blown away. 但是请注意，应用于该元素的任何“默认”样式（例如UA样式表上的UA样式表中的display：块，例如）也会被吹走。

JAVASCRIPT ? JAVASCRIPT？

Nobody thought about other than css to reset css? 除了CSS以外，没有人考虑过要重置CSS吗？ Yes? 是？

There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310 有那个片段完全相关： https : //stackoverflow.com/a/14791113/845310

getElementsByTagName("*") will return all elements from DOM. getElementsByTagName（“ *”）将返回DOM中的所有元素。 Then you may set styles for each element in the collection: 然后，您可以为集合中的每个元素设置样式：

answered Feb 9 '13 at 20:15 by VisioN VisioN在2013年2月9日20:15回答了

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

With all this said; 说了这么多； i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end. 我不认为CSS重置是可行的，除非我们最终只使用一个Web浏览器..如果最后由浏览器设置了“默认”。

For comparison, here is Firefox 40.0 values list for a <blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation. 为了进行比较，这是<blockquote style="all: unset;font-style: oblique"> Firefox 40.0值列表，其中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;

#5楼

another ways: 另一种方式：

1) include the css code(file) of Yahoo CSS reset and then put everything inside this DIV: 1）包含Yahoo CSS reset的css代码（文件），然后将所有内容放入此DIV中：

<div class="yui3-cssreset">
<!-- Anything here would be reset-->
</div>

2) or use 2）或使用

https://cssreset.com/scripts/vanilla-css-un-reset/ https://cssreset.com/scripts/vanilla-css-un-reset/
https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ https://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/
https://cssreset.com/scripts/eric-meyer-reset-css/ https://cssreset.com/scripts/eric-meyer-reset-css/
https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/ https://cssreset.com/scripts/tripoli-css-reset-david-hellsing/
https://cssreset.com/scripts/normalize-css/ https://cssreset.com/scripts/normalize-css/

#6楼

Let me answer this question thoroughly, because it's been a source of pain for me for several years and very few people really understand the problem and why it's important for it to be solved. 让我彻底回答这个问题，因为多年来一直困扰着我，很少有人真正了解这个问题以及为什么解决这个问题很重要。 If I were at all responsible for the CSS spec I'd be embarrassed, frankly, for having not addressed this in the last decade. 坦率地说，如果我要对CSS规范负责，那我会很尴尬，因为在过去十年中没有解决这个问题。

The Problem 问题

You need to insert markup into an HTML document, and it needs to look a specific way. 您需要在HTML文档中插入标记，并且标记必须具有特定的外观。 Furthermore, you do not own this document, so you cannot change existing style rules. 此外，您不拥有此文档，因此不能更改现有的样式规则。 You have no idea what the style sheets could be, or what they may change to. 您不知道样式表可能是什么，或样式表可能会更改为什么。

Use cases for this are when you are providing a displayable component for unknown 3rd party websites to use. 为此，您需要为未知的第三方网站提供可显示的组件以供使用。 Examples of this would be: 例如：

An ad tag 广告代码
Building a browser extension that inserts content 构建一个可插入内容的浏览器扩展
Any type of widget 任何类型的小部件

Simplest Fix 最简单的修复

Put everything in an iframe. 将所有内容放入iframe。 This has it's own set of limitations: 这有它自己的局限性：

Cross Domain limitations: Your content will not have access to the original document at all. 跨域限制：您的内容将完全无法访问原始文档。 You cannot overlay content, modify the DOM, etc. 您无法覆盖内容，修改DOM等。
Display Limitations: Your content is locked inside of a rectangle. 显示限制：您的内容被锁定在矩形内。

If your content can fit into a box, you can get around problem #1 by having your content write an iframe and explicitly set the content, thus skirting around the issue, since the iframe and document will share the same domain. 如果您的内容可以放入一个盒子，你可以有你的内容写一个iframe，明确设置的内容，从而解决这个问题掠过，因为iFrame和文件将共享相同的域绕过问题＃1。

CSS Solution CSS解决方案

I've search far and wide for the solution to this, but there are unfortunately none. 我一直在寻找解决方案，但不幸的是没有。 The best you can do is explicitly override all possible properties that can be overridden, and override them to what you think their default value should be. 您能做的最好的事情就是显式地覆盖所有可能被覆盖的属性，并将它们覆盖为您认为它们的默认值。

Even when you override, there is no way to ensure a more targeted CSS rule won't override yours . 即使覆盖， 也无法确保更有针对性的CSS规则不会覆盖您的CSS规则 。 The best you can do here is to have your override rules target as specifically as possible and hope the parent document doesn't accidentally best it: use an obscure or random ID on your content's parent element, and use !important on all property value definitions. 您在这里可以做的最好的事情是，使覆盖规则目标尽可能具体，并希望父文档不会意外地做到最好：在内容的父元素上使用晦涩或随机ID，并在所有属性值定义上使用！important 。