如何使用not选择器定位ID中的元素？

Question

是否可以使用not css选择器来定位除INSIDE类（或ID的子级）之外的所有元素之外的所有元素？

示例：以widget元素内的所有svg文件为目标：

svg:not(#widget) {
  fill: red;;
}

<div>
 <svg /> // red
 <div id="widget">
  <svg /> // not red
  <svg /> // not red
 </div>
 <svg /> // red
</div>

Answer 1

svg {
  fill: red;
}

#widget svg{
  fill : inherit;
}

<div>
 <svg style='width:200px;height:200px;' /> // red
 <div id="widget">
  <svg style='width:200px;height:200px;'  /> // not red
  <svg style='width:200px;height:200px;'  /> // not red
 </div>
 <svg style='width:200px;height:200px;'  /> // red
</div>

Answer 2

div{
    color: black;
}
div:not(#widget){
    color: red;
}

<div>
 <svg /> // red
 <div id="widget">
  <svg /> // not red
  <svg /> // not red
 </div>
 <svg /> // red
</div>