沒想到我會問一些關于 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>
恢復所有內容也會d從 svg 和圖示中洗掉和屬性消失。然后我嘗試修改恢復選擇器：
.xxx-widget *:not(svg) {
all:revert;
}
上面的代碼片段不起作用，同時瀏覽器不會將其識別為不正確，并且很多樣式都被破壞了。除了 svg 之外，是否有任何方法可以為所有內容組合選擇器？
uj5u.com熱心網友回復：
有趣的問題。首先，影響 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>
uj5u.com熱心網友回復：
<head>
<style>
/* "page" styles */
p { color: red; border: solid; }
svg circle { fill: orange; }
</style>
<style>
@namespace only_svg "http://www.w3.org/2000/svg";
*:not(only_svg|* ) {
all: revert !important;
}
</style>
</head>
<body>
<p>
This text should be black (or in default UA colour),
circle should be orange.
</p>
<svg width="100" viewBox="-4 -4 8 8"
xmlns="http://www.w3.org/2000/svg" >
<circle r="4"></circle>
</svg>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/390839.html
上一篇：CSS實作垂直對齊和回應