Shadow DOM

Question

好的，我有一个漂亮的网站，它的风格在CSS和一切

但是现在我发现了一个问题，我想要一个列表是处女，没有继承任何风格。

我知道我可以只给它一个style="(...)"，所以它会覆盖继承的样式，但是，有没有这样做的指令/技巧/事情呢？

Answer 1

CSS Cascading and Inheritance Level 3规范引入了一次重置所有属性的能力。这是通过使用值all或initial的unset速记属性来实现的，具体取决于您是否需要重置继承的属性。

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

此功能适用于Firefox 27 +，Chrome 37+和Opera 24 +。

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

简化示例：

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

Answer 2

这是一个从一开始就避免它解决的问题。我尽量将contextual (or descendant) selectors保持在最低限度，并避免使用标记名作为选择符。相反，我使用类，以便我的html元素（<a>，<p>，<ul>，<span>等）总是看起来像他们没有被设置样式，无论如何上下文/它的父元素是什么。

在您的情况下，我认为您只能使用内联样式属性或!important覆盖继承的样式，或者甚至更好，创建.reset类：

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

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

Answer 3

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

我在其他答案中发现的问题是没有人使用!important因此可能会发生重置可能不会应用于元素，所有内容都通过清理来解决，为您做到这一点。

Answer 4

Shadow DOM

Shadow DOM v1 的功能目前（不断变化） have growing support，提供了丰富的可能性，包括作用域的CSS < /强>

Shadow DOM v0已在Chrome / Opera中实施，但其他浏览器供应商正在实施v1   MS Edge状态：Under Consideration
  Firefox状态：in-development

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


传递shadow DOM最有用的功能是作用域CSS：


外部页面的CSS选择器不适用于您的组件。

内部定义的样式不会渗出。它们的范围是主机元素。


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

在下面，我们attachShadow向我们应用createElement( "div" ) 剥夺权利 all的新style.all = "unset"应用于其余部分的规则document的{{1}} s。

然后我们将div填入我们喜欢的任何内容，并在appendChild( "new_div" ) 将我们的内容注入shadow-root之前提供所需的任何样式。

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

body

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"; }

Disinherit（重置）特定元素的CSS样式？

4 个答案:

Shadow DOM