Javascript CSS在JS库添加的元素上保持原始样式

我有一个web应用程序，其中有许多用于布局的

。现在我需要添加一些被库淹没的表。问题是库创建了许多具有自己样式的

，并且取决于它们与该位置上已有的

样式冲突的位置

这是（非常）简化的html结构，其中

[myTableDataSource]

用表标识元素

<div id="id1">
    <div>
        <div myTableDataSource="xxx"></div>
    </div>
    <div id="id2">
        <div myTableDataSource="yyy"></div>
    </div>
    <div id="id3">
        <div>
            <div>
                <div myTableDataSource="zzz"></div>
            </div>
        </div>
    </div>
</div>

我的想法是避免在

上应用样式，这些样式是

[myTableDataSource]

的后代，但是。。。我该怎么办？是否有一个选择器来获取

元素的所有非后代和

[myTableDataSource]

属性

---

>请考虑“<代码> >代码>子代<代码> > IDID2<代码>，代码> > ID3/<代码>……，我不能改变这一点，但只修改选择器以避免冲突。< /P> < P >使用属性和<代码>。NOTE（<）/代码>选择器？< /P> 这是一个开始：

#id1 div:not([myTableDataSource="xxx"]) {
  background: orange;
  padding: 30px;
  width: 200px;
  height: 200px;
}

div[myTableDataSource="xxx"] {
  width: 100px;
  height: 100px;
  background: grey;
}

要忽略子体（未测试），请执行以下操作：

---

你是说你能不能修改html？如果你给他们类，那么没有这些类的

div

元素就不会受到影响。你只想对那些有类的div施加影响吗？@DarrenSweeney我不能修改库@IQBALPASHA添加的

div

的HTML代码，只排除那些

div

是微不足道的，问题是排除了他们的后代的

div

这是使用

[myTableDataSource=“xxx”]

属性处理div，而不是在他们的后代上

div[myTableDataSource=“xxx”]div{…}

将用于后代？当然，但我不必设置后代的样式，也不必设置后代的样式，所以问题出在

#id1 div:not（[myTableDataSource=“xxx”]）

中，它应该选择所有div，除了

[myTableDataSource=“xxx”]

#id1 div:not([myTableDataSource="xxx"]):not(div[myTableDataSource="xxx"] div){ ... }