이 두 선택기 사이에 약간 혼란 스럽습니다.
합니까 하위의 선택은 :
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; }답변
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>