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

Question

设置如下：为需要在单个 div 中一起显示的多个项目动态生成内容。布局是：一个外部 div（所有东西的容器），几个内部 div（内容不同），一个 div 内部 div 内部，以及一些文本。

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

外部 div 在 css 中有一个与之匹配的类。内部div匹配为：

.outerdiv div{...

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

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

谢谢， -康拉德

Answer 1

.outerdiv div 选择器在.outerdiv 中选择任何 div，而不仅仅是直接子级。要选择元素的直接子元素，可以使用> selector（IE6 不支持）。

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