CSS 자식 대 후손 선택기

이 두 선택기 사이에 약간 혼란 스럽습니다.

합니까 하위의 선택은 :

div p

모든 선택 p내를 div그 즉시 descedent의 여부? 따라서 p다른 안에있는 경우 div여전히 선택됩니까?

그런 다음 자식 선택기 :

div > p

차이점이 뭐야? 아이는 직계 아이를 의미합니까 ? 예 :

<div><p>

vs

<div><div><p>

둘 다 선택됩니까?

영어에서 "자식"과 "자손"이라는 단어의 의미를 생각해보십시오.

• 내 딸은 내 아이이고 내 자손
• 내 손녀는 내 아이가 아니지만 그녀는 내 후손입니다.

그래 정확 해. div p다음 예제와 일치하지만 div > p그렇지 않습니다.

<div><table><tr><td><p> <!...

첫 번째는 하위 선택기 이고 두 번째는 하위 선택기 입니다.

Bascailly, " AB "동안 "선택 모든 B의, 안쪽, A> B "선택 의 B 단지 어린이 무엇 A는 , 그것은 선택하지 않습니다 b를 의 자식 인 것을 B 의 자식 인 것을 .

이 예는 차이점을 보여줍니다.

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

abc 및 def의 배경색은 녹색이지만 ghi 는 빨간색 배경색입니다.

중요 : 규칙 순서를 다음과 같이 변경 한 경우 :

div>span{background:green}
div span{background:red}

자손 선택기가 자녀를 선택하기 때문에 모든 글자의 배경이 빨간색입니다.

이론적으로 : Child => 조상의 직계 후손 (예 : Joe와 그의 아버지)

후손 => 특정 조상으로부터 내려온 요소 (예 : 조와 그의 증조부)

실제로 : 이 HTML을 사용해보십시오.

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

이 CSS와 함께 :

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Internet Explorer 6에서는 하위 선택기가 지원되지 않습니다 (스타일 시트가 아닌 jQuery / Prototype / YUI 등 선택기에서 선택기를 사용하는 경우 여전히 작동 함)

div p 

부모가 'div'요소 인 모든 'p'요소를 선택합니다.

div> p

즉치 하위를 의미합니다. 상위 요소가 'div'요소 인 모든 'p'요소를 선택합니다.

dom 요소를 통한 순회를 통해 CSS 선택 및 특정 요소에 스타일 적용을 수행 할 수 있습니다. [예

예

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>