从来没有想过我会问一些关于 CSS 的问题，但它就是这样。当您开发一个小部件时，您不能依赖特定网站的样式表，因此您需要如下所示的内容：
.xxx-widget * {
all:revert;
}
但如果你的小部件有 SVG 图标：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 19 16"><path fill-rule="evenodd" d="M.009 16l18.658-8L.009 0 0 6.222 13.333 8 0 9.778z"></path></svg>
恢复所有也会删除dsvg 中的属性和图标消失。然后我尝试修改恢复选择器：
.xxx-widget *:not(svg) {
all:revert;
}
上面的代码片段不起作用，同时浏览器不会将其识别为不正确，并且许多样式都被破坏了。有没有什么方法可以为除 svg 之外的所有内容组成选择器？
有趣的问题。首先，影响 SVGd属性的 CSS（当前）发生在基于 Chromium 的浏览器中。Firefox 尚未跟进。（但对于大多数其他 SVG 属性，CSS 重置会影响它们。）
我会尝试调用 CSS 的神秘知识@namespace：
<style>
/* "page" styles */
p {
color: orange;
border: darkorange solid;
}
circle {
fill: orange;
stroke: darkorange;
}
</style>
<style>
/* "your" styles not affecting SVG */
@namespace "http://www.w3.org/1999/xhtml";
body * {
all: revert;
}
</style>
<body>
<p>
This text should be black (or in default UA colour);<br>
following circle should be orange:
</p>
<svg width="100" viewBox="-4 -4 8 8"
xmlns="http://www.w3.org/2000/svg" >
<circle r="2" stroke-width="1"></circle>
</svg>由于历史上 HTML 和 SVG 仍然拥有不同的命名空间，因此您仍然可以利用它来发挥自己的优势。
更多示例：
<style>
* { /* implicit namespace is not set, so affects both HTML and SVG */ }
</style>
<style>
@namespace "http://www.w3.org/1999/xhtml";
@namespace only_html "http://www.w3.org/1999/xhtml";
@namespace only_svg "http://www.w3.org/2000/svg";
* {
/* implicit namespace is set to html, so affects only HTML, not SVG */
}
*|* {
/* affects elements from any namespace */
}
only_html|* {
/* affects only HTML elements due explicit namespace */
}
only_svg|* {
/* affects only SVG elements due explicit namespace */
}
</style>
| 归档时间： |
|
| 查看次数： |
687 次 |
| 最近记录： |