Comment la manipulation DOM JS affecte-t-elle la correspondance des règles CSS?

Question

Voici la configuration: génère dynamiquement du contenu pour un certain nombre d'éléments qui doivent être affichés ensemble à l'intérieur d'une seule div. La disposition est: Un div externe (le conteneur pour tout), plusieurs divs internes (contenu varie), et un div à l'intérieur de l'autre div interne, avec du texte.

Le div le plus externe fait partie de la page depuis le début, et le js l'obtient par id. Ensuite, chaque div interne et son contenu sont générés puis ajoutés à la div externe. Rincez, répétez.

Le div externe a une classe qui lui correspond en CSS. Le div intérieur est adapté comme:

.outerdiv div{... 

maintenant ... ce qui se passe en réalité est: à la fois la div intérieure et la correspondance de contenu div la outerdiv règle div, malgré que l'un d'eux est clairement (triple vérifié dans un inspecteur , Firefox et Chrome) un enfant de la div intérieure et non l'externe. Je l'ai dans deux endroits différents, donc je suis assez sûr que je ne suis pas fou. Quelqu'un peut-il me dire comment les règles CSS sont évaluées lorsque des manipulations DOM se produisent? (Ou où aller pour trouver?)

Merci, -Conrad

Answer 1

Le sélecteur .outerdiv div sélectionne toutediv au sein .outerdiv, non seulement les enfants directs. Pour sélectionner un enfant direct d'un élément, il y a le > selector (qui n'est pas supporté par IE6). Comme pour la dernière question, les règles CSS sont toujours réévaluées, c'est-à-dire même lors de la manipulation du DOM, les éléments seront toujours stylés selon les règles CSS et ne "transpercent" pas les règles via la manipulation DOM ou quoi que ce soit.