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

的CSS CSS

神无宝儿

2020-03-18

我确定这一定是以前提到过的，但是在寻找一个没有运气的年龄时，我的术语肯定是错误的！

我隐约记得我之前看到的一条推文，暗示一条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;
  }
}

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

说得通？

第2116篇《重置/删除仅元素的CSS样式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答
番长SamJim 2020.03.18

不，这只是更好地管理CSS结构的问题。

在您的情况下，我将命令我的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}
}

只是实验。

樱飞云泡芙 2020.03.18

您是否正在寻找！重要规则？它不会撤消所有声明，但提供了一种覆盖它们的方法。

"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."

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

米亚猴子 2020.03.18

如果您在类中设置CSS，则可以使用jQuery removeClass（）方法轻松删除它们。下面的代码删除了.element类：

    <div class="element">source</div>   
    <div class="destination">destination</div>
      <script>
        $(".element").removeClass();
      </script>

如果未指定参数，则此方法将从所选元素中删除所有类名。

神无逆天 2020.03.18

您提到了移动优先网站...为了进行响应式设计，可以将大屏幕样式替换为小屏幕样式。但是您可能不需要。

尝试这个：

.thisClass {
    /* Rules for all window sizes. */
}

@media all and (max-width: 480px) {
    .thisClass {
        /* Rules for only small browser windows. */
    }
}

@media all and (min-width: 481px) and (max-width: 960px) {
    .thisClass {
        /* Rules for only medium browser windows. */
    }
}

@media all and (min-width: 961px) {
    .thisClass {
        /* Rules for only large browser windows. */
    }
}

这些媒体查询不会重叠，因此它们的规则不会互相覆盖。这样可以更轻松地分别维护每个样式集。

Jim凯 2020.03.18

更好的解决方案

下载“复制/粘贴”样式表，以将CSS属性重置为默认值（UA样式）：https :
//github.com/monmomo04/resetCss.git

谢谢@Milche Patern！
我真的在寻找重置/默认样式属性值。我的第一次尝试是从root（html）元素的浏览器Dev工具复制计算值。但是据计算，它在每个系统上看起来/工作都不同。
对于那些在尝试使用星号*重置子元素样式时遇到浏览器崩溃的人，并且我知道它对您不起作用，因此我将星号“ *”替换为所有HTML标签名称。浏览器没有崩溃；我使用的是Chrome版本46.0.2490.71 m。
最后，值得一提的是，这些属性会将样式重置为最高根元素的默认样式，而不是每个HTML元素的初始值。因此，为了更正此问题，我采用了基于Webkit的浏览器的“用户代理”样式，并在“ reset-this”类下实现了它。

有用的链接：


下载“复制/粘贴”样式表，以将CSS属性重置为默认值（UA样式）：https :
//github.com/monmomo04/resetCss.git

用户代理样式：
HTML元素的浏览器默认CSS
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

伽罗神奇 2020.03.18

让我彻底回答这个问题，因为多年来一直困扰着我，很少有人真正理解这个问题以及为什么解决这个问题很重要。坦率地说，如果我要对CSS规范负责，那我会很尴尬，因为在过去十年中没有解决这个问题。

问题

您需要在HTML文档中插入标记，并且标记必须具有特定的外观。此外，您不拥有此文档，因此无法更改现有的样式规则。您不知道样式表可能是什么，或样式表可能会更改为什么。

为此，您需要为未知的第三方网站提供可显示的组件以供使用。例如：

  1. 广告代码
  2. 构建一个可插入内容的浏览器扩展
  3. 任何类型的小部件

最简单的修复

将所有内容放入iframe。这有其自身的局限性：

  1. 跨域限制：您的内容将完全无法访问原始文档。您无法覆盖内容，修改DOM等。
  2. 显示限制：您的内容被锁定在矩形内。

如果您的内容可以放入一个盒子，你可以有你的内容写一个iframe，明确设置的内容，从而踢脚围绕这一问题得到解决的问题＃1，因为iFrame和文件将共享同一个域。

CSS解决方案

我一直在寻找解决方案，但不幸的是没有。您能做的最好的事情就是显式地覆盖所有可能被覆盖的属性，并将它们覆盖为您认为它们的默认值。

即使您覆盖，也无法确保更有针对性的CSS规则不会覆盖您的CSS规则。您在这里可以做的最好的事情是，让覆盖规则目标尽可能具体，并希望父文档不会意外地做到最好：在内容的父元素上使用晦涩或随机ID，并在所有属性值定义上使用！important 。

飞云Eva 2020.03.18

找到了解决此问题的全新解决方案。

使用all: revert或all: unset。

从MDN：

The revert keyword works exactly the same as unset in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).

You need "A css rule available that would remove any styles previously set in the stylesheet for a particular element."

So, if the element have a class name like remove-all-styles:

Eg:

HTML:

<div class="remove-all-styles other-classe another-class"> 
   <!-- content -->
   <p class="text-red other-some-styles"> My text </p>
</div>

With CSS:

  .remove-all-styles {
    all: revert;
  }

Will reset all styles applied by other-class, another-class and all other inherited and applied styles to that div.

Or in your case: 

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

Will do.

Here we used one cool CSS property with another cool CSS value.

  1. revert

Actually revert, as the name says, reverts that property to its user or user-agent style.

  1. all

And when we use revert with the all property, all CSS properties applied to that element will be reverted to user/user-agent styles.

Click here to know difference between author, user, user-agent styles.

For ex: if we want to isolate embedded widgets/components from the styles of the page that contains them, we could write:

.isolated-component {
 all: revert;
}

Which will reverts all author styles (ie developer CSS) to user styles (styles which a user of our website set - less likely scenario) or to user-agent styles itself if no user styles set.

More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

And only issue is the support: only Safari 9.1 and iOS Safari 9.3 have support for revert value at the time of writing.

因此，我将说使用这种样式并回退到其他任何答案。

宝儿猴子 2020.03.18

另一种方式：

1）包括Yahoo CSS reset的css代码（文件），然后将所有内容放入此DIV中：

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

2）或使用

A蛋蛋乐 2020.03.18

对于未来的读者。我认为这是什么意思，但目前尚未得到广泛支持（请参阅下文）：

#someselector {
  all: initial;
  * {
    all: unset;
  }
}
  • （来源）支持：Chrome 37，Firefox 27，IE 11，Opera 24
  • 不支持：Safari

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android