我正在尝试向DOM树中文本节点中的单词添加事件处理程序，而不修改它们的外观。 目前，我只是在文本节点中拆分单词，并将它们包装在单独的标记中。
它基本上转向:
<div className='parent-of-text'>
Have a good day
</div>
成:
<div className='parent-of-text'>
<span onClick={doSomething}>
Have
</span>
<span onClick={doSomething}>
a
</span>
<span onClick={doSomething}>
good
</span>
<span onClick={doSomething}>
day
</span>
</div>
但是，在某些情况下，可能会有一些CSS规则规定的样式，这些规则是文本父类类的直接后代:
说:
.parent-of-text > span {
color: red;
}
在这种情况下，我可以做什么来避免这种CSS规则的影响呢？
当您用JS生成跨度时（您没有向我们展示相关代码），在这些跨度上应用内联样式，这将覆盖为该元素呈现的CSS样式。
而且这与DOM，JS和事件处理程序无关，这只是CSS应用样式的问题。
null
.parent-of-text>span {
color: red;
}<div class='parent-of-text'>
Have a good day
</div>
<div class='parent-of-text'>
<span onClick={doSomething} style="color: black">
Have
</span>
<span onClick={doSomething}>
a
</span>
<span onClick={doSomething} style="color: black">
good
</span>
<span onClick={doSomething}>
day
</span>
</div>