javascript - JS DOM 操作如何影响 CSS 规则匹配？

Question

设置如下:为需要在单个 div 中一起显示的多个元素动态生成内容。布局是:一个外部 div(所有内容的容器)，几个内部 div(内容各不相同)，一个 div 在每个内部 div 中，以及一些文本。

最外层的div一开始就是页面的一部分，js通过id获取。接下来生成每个内部 div 及其内容，然后附加到外部 div。冲洗，重复。

外层的div在css中有一个匹配它的类。内部 div 匹配为:

.outerdiv div{...

现在...实际发生的是:内部 div 和内容 div 都匹配外部 div 规则，尽管其中一个显然(在检查器、Firefox 和 Chrome 中进行了三次检查)是内部 div 的子元素不是外面。

我在两个不同的地方都有这个，所以我很确定我没有疯。有人能告诉我发生 DOM 操作时如何评估 CSS 规则吗？ (或者去哪里找？)

谢谢， -康拉德

Answer 1

.outerdiv div 选择器选择.outerdiv 中的任何 div，而不仅仅是直接子级。要选择一个元素的直接子元素，有 > selector (虽然 IE6 不支持)。

至于最后一个问题，CSS 规则总是被重新评估，即即使在操作 DOM 时，元素也将始终根据 CSS 规则设置样式，并且不会通过 DOM 操作或类似的方式“继承”规则。