CSS 优先规则对 <style> 有何规定？ Shadow DOM 中的标签？
我有一个元素<component class="component"> ， <head> 中包含的 CSS 文件与:
component {
display: inline-block;
}
和一个<style>一些 Shadow DOM 中的标签:
::slotted(.component) {
display: block;
}
如果我理解正确的话，第一条规则的特殊性应该是 0.0.1因为它有一个元素，第二个元素为 0.1.1因为它有一个伪元素和一个类。因此，第二个更具体，应该覆盖第一个。但这并没有发生。在开发人员控制台(Chrome)中，我看到了这两条规则，但它们都没有被划掉，并且在“计算样式”面板中，我看到了“display: inline-block”。
评论中要求的更详细的示例:
<head>
<style>
/* "other-component" related styles: */
other-component {
display: inline-block;
}
</style>
</head>
<body>
<some-component>
#shadow-root:
<style>
slot[name=some-slot]::slotted(*) {
display: block; /* Only works with !important. */
}
</style>
<slot name="some-slot"></slot>
<!-- The actual ("light-dom") content: -->
<other-component slot="some-slot"></other-component>
</some-component>
</body>
最佳答案
此行为在 CSS Scoping Module Level 1 Draft §3.3 中定义:
When comparing two declarations that have different tree contexts, then for normal rules the declaration earlier in the shadow-including tree order
[the first, global rule]wins, and for important rules the declaration coming later in the shadow-including tree[the second, ::slotted(*) rule]order wins.Note: This is the opposite of how scoped styles work.
在 other worlds :
Styles that applied before distribution continue to apply after distribution.
关于Shadow DOM <style> 中的 CSS 优先级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54884345/