JS DOM 조작이 CSS 규칙 일치에 어떤 영향을 줍니까?

Question

다음은 설정입니다. 하나의 div 안에 함께 표시해야하는 여러 항목의 콘텐츠를 동적으로 생성합니다. 레이아웃은 다음과 같습니다. 바깥 쪽 div (모든 것에 대한 컨테이너), 여러 개의 내부 div (내용이 다릅니다) 및 div가 각각 다른 텍스트와 함께 내부 div 안에 있습니다.

가장 바깥 쪽 div는 처음부터 페이지의 일부이고 js는 id로 페이지를 가져옵니다. 다음으로 각 내부 div와 그 내용이 생성 된 다음 외부 div에 추가됩니다. 린스, 반복하십시오.

외부 div에는 CSS에서 일치하는 클래스가 있습니다.

.outerdiv div{... 

지금 ... 무엇을 실제로 일어나는 것은 : 내부 사업부는 다음과 같이 일치 둘 중 하나는 분명히에도 불구하고, outerdiv div에 규칙 내부 사업부 및 컨텐츠 사업부의 경기 (트리플은 관리자의 확인 , Firefox 및 Chrome) 내부 div의 하위 항목은 외부가 아닙니다.

저는 두 곳의 분리 된 장소에 이걸 가지고있어서 미친 게 아니라고 확신합니다. 누군가 DOM 조작이 발생할 때 CSS 규칙이 어떻게 평가되는지 말해 줄 수 있습니까? (또는 곳을 찾아 이동합니다?)

감사합니다, 는 -Conrad

Answer 1

.outerdiv div 선택은 어떤.outerdiv 내 div뿐만 아니라 직접 아이들 선택합니다. 요소의 직접 자식을 선택하려면 > selector이 있어야합니다 (IE6에서는 지원하지 않습니다).

마지막 질문은 CSS 규칙이 항상 다시 평가된다는 것입니다. 즉, DOM을 조작 할 때도 요소는 CSS 규칙에 따라 항상 스타일이 지정되며 DOM 조작 등을 통해 규칙을 "수행"하지 않습니다.