Html 取消继承（重置）特定元素的 CSS 样式？

Disinherit (reset) the CSS style of a specific element?

提问by ArcDare

Ok, I have a beautiful web, with its styles within a CSS and everything

好的，我有一个漂亮的网页，它的样式包含在 CSS 和所有内容中

But now I've found a problem, I want ONE list to be virgin, without any style inherited.

但是现在我发现了一个问题，我希望 ONE 列表是处女的，没有任何继承的样式。

I know I can do it just giving it a style="(...)"so it overwrites the inherited style, but, is there any instruction / trick / something to do it without doing this?

我知道我可以做到这一点，只要给它一个，style="(...)"这样它就会覆盖继承的样式，但是，如果不这样做，是否有任何指令/技巧/方法可以做到这一点？

回答by Marat Tanalin

The CSS Cascading and Inheritance Level 3specification introduces ability to reset all properties at once. This is achieved by using the allshorthand property with the value of initialor unsetdepending on whether you need to reset inherited properties.

在CSS层叠和继承3级所有属性一次复位规范引入能力。这是通过使用all具有initial或值的速记属性来实现的，unset具体取决于您是否需要重置继承的属性。

Note that these have nothing to do with browser's default values.

请注意，这些与浏览器的默认值无关。

The feature is available in Firefox 27+, Chrome 37+, and Opera 24+.

该功能在 Firefox 27+、Chrome 37+ 和 Opera 24+ 中可用。

Until the feature is widely implemented, you can use “namespace” classes. For example, to separate layout styles from content styles, a class like contentcould be used as a namespace for all content styles.

在该功能被广泛实现之前，您可以使用“命名空间”类。例如，要将布局样式与内容样式分开，content可以将like 类用作所有内容样式的命名空间。

Simplified example:

简化示例：

/* Global styles for UL lists. */
UL {list-style: none; margin: 0; padding: 0; }

/* Styles for UL lists inside content block. */
.content UL {list-style: disc; margin: 1em 0 1em 35px; }

回答by TJ.

This is a problem that is solved best by avoiding it from the beginning. I try to keep contextual (or descendant) selectorsto a minimum and I avoid using tag names as selectors. Instead I make use of classes so that my html elements (<a>, <p>, <ul>, <span>, etc) will always look like they've not been styled no matter what the context/its parent element is.

这个问题最好从一开始就避免它来解决。我尽量将上下文（或后代）选择器保持在最低限度，并避免使用标签名称作为选择器。相反，我使用了类，以便我的 html 元素（<a>、<p>、<ul>、<span>等）无论上下文/其父元素是什么，都看起来始终没有样式化。

In your case, I think you can only overwrite the inherited styles as you have mentioned with the inline-style attribute or with !importantor even better, create a .resetclass:

在您的情况下，我认为您只能使用 inline-style 属性!important或什至更好的方式覆盖您提到的继承样式，创建一个.reset类：

.reset { with: auto; height: auto; padding: 0; /* etc */ }

All solutions mentioned above have drawbacks, so you'll need to choose your battle.

上面提到的所有解决方案都有缺点，所以你需要选择你的战斗。

回答by ZwartyZ

You can try this http://cleanslatecss.com/it completely reset the target element, it's only css, no js, you just have to add a class to the target and it's all done.

你可以试试这个http://cleanslatecss.com/它完全重置目标元素，它只有 css，没有 js，你只需要向目标添加一个类就可以了。

The problem I found in the other answers is that nobody used !importantso it could happen that the reset may not be applied to the element, everything is solved with cleanslate that do that for you.

我在其他答案中发现的问题是没有人使用，!important因此可能会发生重置可能不适用于元素的情况，一切都通过为您执行此操作的 cleanslate 解决。

回答by Fred Gandt

Shadow DOM

影子DOM

The feature(s) of the Shadow DOM v1currently (constantly subject to change)have growing support, offering a wealth of possibilities, including scoped CSS.

Shadow DOM 的功能v1目前（不断变化）得到了越来越多的支持，提供了丰富的可能性，包括作用域 CSS。

Shadow DOM v0was implemented in Chrome/Opera but other browser vendors are implementing v1.
MS Edge status: Under Consideration
Firefox status: in-development

Shadow DOMv0是在 Chrome/Opera 中实现的，但其他浏览器供应商正在实现v1.
MS Edge 状态：考虑中
Firefox 状态：开发中

From Google Developers: Shadow DOM v1: Self-Contained Web Components:

来自Google Developers：Shadow DOM v1：Self-Contained Web Components：

Hands down the most useful feature of shadow DOM is scoped CSS:

• CSS selectors from the outer page don't apply inside your component.
• Styles defined inside don't bleed out. They're scoped to the host element.

CSS selectors used inside shadow DOM apply locally to your component. In practice, this means we can use common id/class names again, without worrying about conflicts elsewhere on the page. Simpler CSS selectors are a best practice inside Shadow DOM. They're also good for performance.

shadow DOM 最有用的特性是作用域 CSS：

• 来自外部页面的 CSS 选择器不适用于您的组件内部。
• 内部定义的样式不会溢出。它们的范围是宿主元素。

在 shadow DOM 中使用的 CSS 选择器在本地应用于您的组件。实际上，这意味着我们可以再次使用通用的 id/class 名称，而不必担心页面其他地方的冲突。更简单的 CSS 选择器是 Shadow DOM 中的最佳实践。它们也有利于性能。

Below, we attachShadowto a new createElement( "div" )to which we apply the style.all = "unset"to disinheritallthe rules applied to the rest of the document's divs.

下面，我们attachShadow将createElement( "div" )应用到一个新的sstyle.all = "unset"来取消all应用到其余documentsdiv的规则的继承。

We then fill our shadow-rootwith whatever content we like, and supply any styles desired, before appendChild( "new_div" )injectsour content into the body.

然后我们shadow-root用我们喜欢的任何内容填充我们的内容，并提供所需的任何样式，然后将我们的内容注入.appendChild( "new_div" )body

The result is stylistically isolated content.

结果是风格上孤立的内容。

const new_style = document.createElement( "style" ),
      new_div = document.createElement( "div" ),
      new_list = document.createElement( "ul" ),
      new_entries = [ "Lorem", "Ipsum", "Dolor" ],
      shadow = new_div.attachShadow( { mode: "open" } );
new_style.textContent = "ul { list-style: none; }";
new_div.style.all = "unset";
new_entries.forEach( ( v ) => {
  var li = document.createElement( "li" );
  li.textContent = v;
  new_list.appendChild( li );
} );
shadow.appendChild( new_style );
shadow.appendChild( new_list );
document.body.appendChild( new_div );

body {
  background: antiquewhite;
}
ul {
  margin: 2em;
  border: 2px gray solid;
  border-right: 0;
  border-left: 0;
  background: cornflowerblue;
}
li {
  margin: inherit;
  font-family: "Comic Sans MS";
}

<body>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Qux</li>
  </ul>
</body>